如何在chart.js或D3中制作阶梯线或阶梯图？ [英] How can I make a stepline or stepped chart in chart.js or D3?

问题描述

我可以在Google Spreadsheets中完成此操作，下面是截图：

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 with basic configuration： http://jsfiddle.net/kaatula/j3FJf / 1 /


• Chart.js文档： http：/ /www.chartjs.org/docs/


• D3文档： http://strongriley.github.io/d3/api/


• jsFiddle with basic configuration: http://jsfiddle.net/kaatula/j3FJf/1/
• Chart.js documentation: http://www.chartjs.org/docs/
• D3 documentation: http://strongriley.github.io/d3/api/

任何帮助表示赞赏。我没有在这个特定类型的图表的任何一个库中看到一个例子（我称之为Stepped或Step line），但我相信他们足够灵活来实现这个目标吗？

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?

谢谢

推荐答案

似乎没有人回答这个问题，但你可以用chart.js来做到这一点在数据集配置中设置 steppedLine：true 。

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,
            }
   }

这篇关于如何在chart.js或D3中制作阶梯线或阶梯图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！