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

我可以在谷歌电子表格中实现这一点，下面是一个屏幕截图：

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

• 具有基本配置的JSFIDLE：
• Chart.js文档：
• D3文件：

感谢您的帮助。我在这两个库中都没有看到这种特定类型的图表（称为我相信“阶梯”或“阶梯线”）的示例，但我相信它们足够灵活，可以实现这一点吗

---

谢谢

您可以使用

d3.svg.line

并将

行设置为
前一步
或
后一步

以下是文件：


以下是一个例子：

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

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

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

现在的过程是使用
d3.curvestepaafter




另一种方法是使用直线并手动设置插值器，例如，
d3.line（）.curve（d3.curveStepAfter）
这是v4的正确答案-谢谢。糟糕的是，对于不同的环境，不能有多个被接受的答案。