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

2022-01-22 00:00:00 graphing d3.js javascript chart.js

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

I'm able to accomplish this in Google Spreadsheets, below is a screenshot:

这是 CSV 中的小数据集

Here's the small dataset in 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/
  • 感谢任何帮助.我在任何一个库中都没有看到这种特定类型图表的示例(称为我相信步进"或步进线"),但我相信它们足够灵活来完成这个?

    Any help is appreciated. I'm not seeing an example in either library of this specific kind of chart (called I believe "Stepped" or "Step line"), but I believe they are flexible enough to accomplish this?

    谢谢

    推荐答案

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

    Nobody seem to have answered this, but you can do that with chart.js by setting steppedLine: true in the dataset configuration.

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

相关文章