CanvasJS 无法正确呈现图表
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 的当前值。 IE。数据点 = [];
现在,如果您将 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"
有关更多信息,您可以阅读按值传递和按引用传递。
Javascript by reference vs. by value
我正在使用以下代码在 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 的当前值。 IE。数据点 = [];
现在,如果您将 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"
有关更多信息,您可以阅读按值传递和按引用传递。
Javascript by reference vs. by value