如何在chart.js或D3中制作阶梯线或阶梯图？

Question

我可以在Google Spreadsheets中完成此操作,下面是截图:

这是CSV中的小数据集

Buy PPU,Sell PPU,Net PPU
0.023,0.019,-0.000725
0.026,0.0165,-0.003725
0.021,0.021,0.00735
0.015,0.0165,0.0147
0.021,0.028,0.0168
0.018,0.028,0.0198

• jsFiddle基本配置:http://jsfiddle.net/kaatula/j3FJf/1/
• Chart.js文档:http://www.chartjs.org/docs/
• D3文档:http://strongriley.github.io/d3/api/

任何帮助表示赞赏.我没有在这个特定类型的图表的任何一个库中看到一个例子(我称之为"Stepped"或"Step line"),但我相信他们足够灵活来实现这一目标？

谢谢

Answer 1

似乎没有人回答这个问题,但你可以通过在数据集配置中设置steppedLine:true来使用chart.js .

var config = {
        type: 'line',
        data: {
            datasets: [{
                label: "My dataset",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                steppedLine: true,
            }
   }

Answer 2

@Baz的答案是D3版本3的完美选择，但对于任何努力为版本4寻找类似资源的人（API发生了巨大变化）。

现在将改为使用该过程d3.curveStepAfter。

文件资料

例

一种替代方法是使用一条线并手动设置插值器，例如 d3.line().curve(d3.curveStepAfter)

Answer 3

您可以使用 ad3.svg.line并将line.interpolate设为step-before或step-after。

这是文档：

https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate

这是一个例子：

http://bl.ocks.org/mbostock/4342190