如何在chart.js或D3中创建步进图或阶梯图？

Question

我能够在谷歌电子表格做到这一点，下面是截图：

以下是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/

任何帮助表示赞赏。在这种特定类型的图表（我相信“阶梯”或“分步线”）中，我没有看到任何一个示例，但我相信它们足够灵活来完成此任务？

谢谢

Answer 1

您可以使用一个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

Answer 2

没有人似乎已经回答了，但你可以做到这一点通过设置chart.js之stepslaine：true在数据集配置中。

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

Answer 3

@巴兹的答案是完美的D3 3版本，但任何人都努力寻找4版类似的资源（API非常巨大的变化）..

的过程，现在是使用d3.curveStepAfter来代替。

这里是文档： https://github.com/d3/d3/blob/master/API.md#user-content-curves

下面是一个例子： http://bl.ocks.org/emmasaunders/c25a147970def2b02d8c7c2719dc7502

---

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