dc.js 中的双 Y 轴折线图 [英] Dual Y axis line chart in dc.js

问题描述

我有一个由三个折线图组成的复合图表.其中一个图表使用假"组作为建议 ，然后设置 rightY 对于复合图表上的第二个比例，你应该得到你想要的.

但这完全是前沿问题，我看到该示例目前已损坏(web/examples/right-axis.html).因此，如果您遇到问题，请通过创建问题或开始进行跟进用户组讨论.

I have a composite chart of three line charts. One of the charts is using a "fake" group as suggested here. As you can see in the snapshot below though the scale of the 3rd chart is very different from the other two. The solution I would like is to have a dual axis chart as shown here in pure d3. I think it can be done using a .renderlet() on the main composite chart but I was wondering if there was a "sexier" solution with pure dc.js?

Here is a snapshot:

and here is my code. (in coffeescript) I tried using .y and .yAxis on the internal charts but that had no effect.

    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])

解决方案

Yes! It's a pretty new feature and I haven't tried it out myself, but if you create some of your subcharts with useRightYAxis, and then set rightY for the second scale on the composite chart, you should get what you're looking for.

But this is totally bleeding edge and I see that the example is currently broken (web/examples/right-axis.html). So please follow up if you run into trouble by creating an issue or starting a discussion on the user group.

这篇关于dc.js 中的双 Y 轴折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！