[英]CanvasJS not properly rendering chart
我正在使用以下代码在CanvasJS中呈现OHLC图表:
<script>
var candleData = [];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: 'Demo Stacker Candlestick Chart (Realtime)'
},
zoomEnabled: true,
axisY: {
includeZero: false,
title: 'Price',
prefix: '$'
},
axisX: {
interval: 1,
},
data: [{
type: 'ohlc',
dataPoints: candleData
}
]
});
function mapDataToPointObject(data) {
var dataPoints = [];
for(var i = 0; i < data.length; i++) {
var obj = data[i];
var newObj = {
x: new Date(obj.time),
y: [
obj.open,
obj.high,
obj.low,
obj.close
]
}
dataPoints.push(newObj);
}
return dataPoints;
}
function updateChart() {
$.ajax({
url: 'http://localhost:8080',
success: function(data) {
candleData = JSON.parse(data);
candleData = mapDataToPointObject(candleData);
chart.render();
}
});
}
$(function(){
setInterval(() => {
updateChart();
}, 500);
});
数据将正确加载,解析为正确的格式,并按应在间隔上调用render()
。 问题是,虽然图表轴和标题均正确显示,但没有数据显示。 图表为空。
起作用的是使用以下方法将数据直接设置到图表中
chart.options.data[0].dataPoints = candleData;
为什么我的上述解决方案不起作用? 有没有一种方法可以更新图表的数据dataPoints
而不必对图表数据点的直接访问器进行硬编码?
它与JavaScript按值传递和按引用传递有关。
执行以下行之后。
dataPoints:CandleData
dataPoints将引用CandleData的当前值。 即。 dataPoints = [];
现在,如果您将CandleData重新定义为任何其他值。
candleData = JSON.parse(data);
candleData = mapDataToPointObject(candleData);
这样,dataPoints将不会知道此更新,并且仍将引用空数组(您之前指出的)。
以下代码片段将使其易于理解
//pass by value var a = "string1"; var b = a; a = "string2"; alert("b is: " + b); //this will alert "string1" //pass by reference var c = { s: "string1" }; var d = c; cs = "string2"; alert("ds is: " + ds); //this will alert "string2"
有关更多信息,您可以阅读有关按值传递和按引用传递的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.