Question

在绘图表中创建candlestick图表的最佳方法是什么？我想在wiki上做这样的图像： Wiki example

我正在考虑使用堆叠条形图并使用css设置样式。例如，bar中最低的值是透明的，只是垂直定位烛台。条形中的下一个值将是较低的棒（矩形水平挤压css成为线）。接下来是已经是矩形的身体，上面的棍子将再次被压缩成直线。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Plots.Segment绘制线段，因此每天将每个线段的末端设置为高/低可获得＆＃34; wicks＆＃34;每个烛台。同时，Plots.Rectangle绘制矩形，因此我们将每个矩形的顶部/底部设置为每天打开/关闭。覆盖这两个Plot会给我们一个烛台图表。

希望这有帮助！

如何在plottable.js

1 个答案: