我使用以下代码在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
而无需硬编码图表的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;
c.s = "string2";
alert("d.s is: " + d.s); //this will alert "string2"
有关更多信息,您可以阅读有关按值传递和按引用传递的信息。