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

在plottable中创建candlestick图表的最佳方法是什么？我想在wiki上做这样的图像： Wiki example 如何在plottable.js中创建烛台图表

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

这是正确的方式去或有没有更优雅的解决方案？那里有没有例子？有没有人做过这样的事情？

2015-12-02 minder

我包含“d3”标签，因为答案可能在d3中实现。 – minder

很高兴你问了！在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绘制线段，因此每个节段的端部设置为高/低的每一天获取每个烛台“灯芯”。同时，Plots.Rectangle绘制矩形，因此我们将每个矩形的顶部/底部设置为每天打开/关闭。叠加两个Plot就可以得到烛台图表。

希望这会有所帮助！

来源

2015-12-04 19:42:51 jtlan

非常感谢。这正是我所需要的。希望它也能帮助其他人。 – minder

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

回答

相关问题