dc.js中的双Y轴折线图

路易斯

我有一个由三个折线图组成的复合图。其中一张图表使用的是此处建议的“假”组正如您在下面的快照中看到的那样,尽管第三个图表的比例与其他两个图表有很大不同。我想要的解决方案是制作一个双轴图,如此处纯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])
高登

是! 这是一个非常新的功能,我还没有亲自尝试过,但是如果您使用useRightYAxis创建了一些子图表,然后在合成图表上为第二个比例尺设置了rightY,那么您应该得到了想要的东西。

但这完全是前沿,我看到该示例当前已损坏(web / examples / right-axis.html)。因此,如果在创建问题在用户组上开始讨论遇到麻烦,请继续进行后续操作

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用dc.js创建多折线图

来自分类Dev

dc.js中的多系列折线图

来自分类Dev

dc js-使用dc js的直方图

来自分类Dev

dc.js按y轴/值对有序折线图进行排序

来自分类Dev

使用DC.JS的多系列折线图

来自分类Dev

带有dc.js的堆叠系列折线图(堆叠区域)

来自分类Dev

如何在双Y轴图中的ggvis中对齐条形图和折线图?

来自分类Dev

D3js折线图的Y轴上的刻度大小不同

来自分类Dev

dc.js折线图未显示任何内容

来自分类Dev

在DC js rowChart中固定x轴?

来自分类Dev

莫里斯折线图中Y轴的反向顺序

来自分类Dev

D3.js-折线图:缩放时区域路径超过x和y轴

来自分类Dev

如何创建带有锁定y轴的水平滚动Chart.js折线图?

来自分类Dev

如何在Chart.js折线图上自定义y轴标签?

来自分类Dev

DC.js折线图-未显示任何线

来自分类Dev

具有双Y轴但具有3个或更多时间序列的Google折线图

来自分类Dev

GGplot不为折线图生成线性y轴

来自分类Dev

SSRS折线图动态Y轴

来自分类Dev

dc js-使用dc js的直方图

来自分类Dev

隐藏dc.js图表X轴

来自分类Dev

dc.js中的双Y轴折线图

来自分类Dev

如何在双Y轴图中的ggvis中对齐条形图和折线图?

来自分类Dev

dc.js时间序列折线图

来自分类Dev

d3.js中的双Y轴折线图,没有外部数据

来自分类Dev

过滤其他图表后,dc-js折线图消失了

来自分类Dev

dc.js中的多折线顺序图

来自分类Dev

dc.js堆叠的折线图,具有1个以上的维度

来自分类Dev

获取用Chart.js渲染的折线图的y轴的最大值

来自分类Dev

.renderTitle(false) 不适用于折线图 DC.js