如何在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)