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

【问题标题】：How can I make a stepline or stepped chart in chart.js or D3?如何在 chart.js 或 D3 中制作阶梯线或阶梯图？
【发布时间】：2014-12-04 21:59:53
【问题描述】：

我可以在 Google 电子表格中完成此操作，以下是屏幕截图：

这是 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/

感谢任何帮助。我在任何一个库中都没有看到这种特定类型图表的示例（称为我相信“阶梯”或“阶梯线”），但我相信它们足够灵活来完成这个？

谢谢

【问题讨论】：

标签： javascript d3.js graphing chart.js

【解决方案1】：

@Baz 的答案非常适合 D3 版本 3，但对于任何努力寻找版本 4 的类似资源的人来说（API 发生了巨大变化）..

现在的过程是改用d3.curveStepAfter。

documentation

example

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

【讨论】：

这是 v4 的正确答案 - 谢谢。太糟糕了，不能有多个可接受的答案——针对不同的上下文。

【解决方案2】：

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

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

【讨论】：

chart.js 3.5.1 中的属性是阶梯式的

【解决方案3】：

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

这是文档：

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

这是一个例子：

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

【讨论】：