Как создать свечный график в plottable.js

Question

Как создать свечный график в plottable.js

Каков наилучший способ создать свечную диаграмму в графике? Я хотел бы сделать что-то вроде этого изображения в вики: пример вики

Я думал об использовании составного гистограммы и стилизации его с помощью CSS. Например, самое нижнее значение в баре будет прозрачным, просто чтобы расположить свечу вертикально. Следующим значением в баре будет нижняя палка (прямоугольник сжимается горизонтально с помощью css, чтобы стать линией). Далее будет тело, которое уже является прямоугольником, а верхняя ручка снова будет прямоугольником, сжатым до линии.

Это правильный путь или есть более элегантные решения? Есть ли там примеры? Кто-нибудь делал что-то подобное раньше?

3

charts candlestick-chart plottable plottable.js

Источник

user5629437 02 дек '15 в 09:45

1 ответ

Решение

Другие вопросы по тегам charts candlestick-chart plottable plottable.js

user5377969 04 дек '15 в 19:42 2015-12-04 19:42 · Accepted Answer · 2015-12-04 19:42

Рад, что ты спросил! Лучший способ сделать это в Plottable - это объединить Plots.Rectangle а также Plots.Segment используя Group, Вот пример:

window.onload = function() {
  var xScale = new Plottable.Scales.Time();
  var yScale = new Plottable.Scales.Linear();
  
  var dataset = new Plottable.Dataset(exampleData);
  
  var wicks = new Plottable.Plots.Segment();
  wicks.addDataset(dataset);
  wicks.x(function(d) { return parseDate(d.date, 12); }, xScale);
  wicks.y(function(d) { return d.high; }, yScale);
  wicks.y2(function(d) { return d.low; });
  wicks.attr("stroke", "black");
  
  var candles = new Plottable.Plots.Rectangle();
  candles.addDataset(dataset);
  candles.x(function(d) { return parseDate(d.date, 2); }, xScale);
  candles.x2(function(d) { return parseDate(d.date, 22); });
  candles.y(function(d) { return d.open; }, yScale);
  candles.y2(function(d) { return d.close; });
  candles.attr("fill", function(d) {
    if (d.close > d.open) {
      return "#63c261";
    } else {
      return "#fd373e";
    }
  });
  
  var candlesticks = new Plottable.Components.Group([wicks, candles]);
  
  candlesticks.renderTo("#chart");
};

function parseDate(dateString, hourOfDay) {
  var day = new Date(dateString);
  day.setHours(hourOfDay);
  return day;
}

var exampleData = [
  {
    date: "2014-08-29",
    open: 102.86,
    high: 102.90,
    low: 102.20,
    close: 102.50
  },
  {
    date: "2014-08-28",
    open: 101.59,
    high: 102.78,
    low: 101.56,
    close: 102.25
  },
  {
    date: "2014-08-27",
    open: 101.02,
    high: 102.57,
    low: 100.70,
    close: 102.13
  },
];

body { background-color: #AAA; }
svg { background-color: #FFF; }

    <html>
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.16.2/plottable.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.16.2/plottable.css">
      </head>
      <body>
        <svg id="chart" width="400" height="300"></svg>
      </body>
    </html>

Plots.Segment рисует отрезки линий, поэтому, устанавливая концы каждого сегмента на максимум / минимум каждый день, вы получаете "фитили" для каждой свечи. В то же время, Plots.Rectangle рисует прямоугольники, поэтому мы устанавливаем верх / низ каждого прямоугольника на открытие / закрытие на каждый день. Наложение двух Plot s дает нам график свечей.

Надеюсь это поможет!