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

在plottable中创建烛台图表的最佳方法是什么？我想在wiki上做这样的图像: Wiki示例

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

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

很高兴你问!在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; }