How can I make a stepline or stepped chart in chart.js or D3?

问题

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

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 documentation: http://www.chartjs.org/docs/
D3 documentation: 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?

Thank you

回答1:

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

回答2:

@Baz's answer is perfect for D3 version 3, but for anyone struggling to find similar resources for version 4 (the API changed pretty dramatically)..

The process now is to use d3.curveStepAfter instead.

documentation

example

An alternative approach is using a line and manually setting the interpolator, eg, d3.line().curve(d3.curveStepAfter)

回答3:

You can use a d3.svg.line and set the line.interpolate to either step-before or step-after.

Here is the documentation:

https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate

Here is an example:

http://bl.ocks.org/mbostock/4342190

来源：https://stackoverflow.com/questions/26287448/how-can-i-make-a-stepline-or-stepped-chart-in-chart-js-or-d3

标签

javascript

d3.js

graphing

chart.js