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

任何幫助表示贊賞。 我在任何一個庫中都沒有看到這種特定類型圖表的示例（我相信稱為“步進”或“步進線”），但我相信它們足夠靈活以實現這一目標？

謝謝

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

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

Chartjs為各種圖表提供了step屬性的stepped折線圖。 例如，在 HTML 文檔中，添加 canvas 並使用 id：

[HTML]

<canvas id="myChart" width="400" height="400"></canvas>
<script src="index.js"></script>

[索引.js]

const ctx = document.getElementById('myChart').getContext('2d');

const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [5, 4, 3, 6, 2, 3],
        borderColor: '#FF0000',
        borderWidth: 2,
        stepped: 'after',
    }]
}

const myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

stepped可以是false 、 true 、 before 、 after 、 middle的任何一個。 請參閱 文檔以獲取更多信息。