gpt4 book ai didi

charts - 如何在plottable.js中创建蜡烛图

转载 作者:行者123 更新时间:2023-12-02 11:56:03 24 4
gpt4 key购买 nike

创建 candlestick 的最佳方式是什么?绘图中的图表?我想在维基上做类似这张图片的事情: Wiki example

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

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

最佳答案

很高兴你提出这个问题!在 Plottable 中执行此操作的最佳方法是使用 Group 组合 Plots.RectanglePlots.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 重叠即可得到烛台图。

希望这有帮助!

关于charts - 如何在plottable.js中创建蜡烛图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34039472/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com