Gráfico de líneas del eje doble Y en dc.js
Tengo un gráfico compuesto de tres gráficos de líneas. Uno de los gráficos está usando un grupo "falso" como se sugiereaquí. Como puede ver en la instantánea a continuación, aunque la escala del tercer gráfico es muy diferente de las otras dos. La solución que me gustaría es tener un gráfico de doble eje como se muestraaquí en puro d3. Creo que se puede hacer usando un .renderlet () en el cuadro compuesto principal, pero me preguntaba si había una solución "más sexy" con dc.js puro.
Aquí hay una instantánea:
Y aquí está mi código. (en coffeescript) Traté de usar .y y .yAxis en los gráficos internos, pero eso no tuvo ningún efecto.
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])