我有一个由三个折线图组成的复合图。其中一张图表使用的是此处建议的“假”组。正如您在下面的快照中看到的那样,尽管第三个图表的比例与其他两个图表有很大不同。我想要的解决方案是制作一个双轴图,如此处纯d3所示。我认为可以在主合成图上使用.renderlet()来完成此操作,但我想知道是否存在使用纯dc.js的“性感”解决方案?
这是快照:
这是我的代码 (在coffeescript中)我尝试在内部图表上使用.y和.yAxis,但是没有效果。
actualValuesChart = dc.lineChart(mainChart)
.group(metric, "actual " + @displayName)
.valueAccessor (d) -> d.value.avg
.colors(['green'])
.interpolate('basis-open')
normValuesChart = dc.lineChart(mainChart)
.group(metric, "normal " + @displayName)
.valueAccessor (d) -> d.value.avg_avg
.colors(['rgba(0,0,255,1)'])
.interpolate('basis-open')
clipsCountChart = dc.lineChart(mainChart)
.group(buildFakeGroup(defaultClipsArray))
.colors(['red'])
.interpolate('basis-open')
# .y(d3.scale.linear().range([100, 0]))
# .yAxis(d3.svg.axis().scale(d3.scale.linear().range([100, 0])))
mainChart
.dimension(@dimension.monthStamp)
.width(thisChart.width + 30)
.height(thisChart.width*.333)
.yAxisLabel(@displayName)
.elasticY(true)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months)
.brushOn(true)
.legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
.renderHorizontalGridLines(true)
.compose([actualValuesChart,normValuesChart,clipsCountChart])
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句