如何在 plottable.js 中创建烛台图表

Question

在 plottable 中创建 candlestick 图表的最佳方法是什么？我想在 wiki 上做类似这张图片的事情： Wiki example

我正在考虑使用堆叠条形图并使用 css 对其进行样式设置。例如，bar 中的最低值将是透明的，只是为了垂直放置烛台。柱中的下一个值将是较低的杆（用 css 水平挤压矩形成为线）。接下来是已经是矩形的主体，上杆将再次被矩形挤压成直线。

这是正确的方法还是有更优雅的解决方案？那里有例子吗？有人做过这样的事吗？

Answer 1

很高兴你问！在 Plottable 中执行此操作的最佳方法是使用 Group 组合 Plots.Rectangle 和 Plots.Segment。这是一个例子：

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 绘制线段，因此将每个线段的末端设置为每天的 high/low 得到每个烛台的 "wicks"。同时，Plots.Rectangle绘制矩形，所以我们将每个矩形的top/bottom设置为每天的open/close。叠加两个 Plots 得到一个烛台图表。

希望对您有所帮助！

如何在 plottable.js 中创建烛台图表

How to create candlestick chart in plottable.js

charts

candlestick-chart

plottable