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屋！