Как я могу сделать stepline или stepped chart в chart.js или D3?

Question

Я могу сделать это в Таблицах Google, ниже скриншот:

Вот небольшой набор данных в формате 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/

Любая помощь приветствуется. Я не вижу примера ни в одной из библиотек этого конкретного типа диаграммы (я считаю, что «Stepped» или «Step line»), но я считаю, что они достаточно гибки для достижения этого?

Спасибо

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 путем установки steppedLine: 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)