CanvasJS 无法正确渲染图表答案

【问题标题】：CanvasJS not properly rendering chartCanvasJS 无法正确渲染图表
【发布时间】：2017-12-20 04:00:45
【问题描述】：

我正在使用以下代码在 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 canvasjs

【解决方案1】：

这与JavaScript的值传递和引用传递有关。

执行以下行之后。

数据点：蜡烛数据

dataPoints 将引用蜡烛数据的当前值。 IE。数据点 = [];

现在，如果您将烛数据重新定义为任何其他值。

        candleData = JSON.parse(data);
        candleData = mapDataToPointObject(candleData);

然后 dataPoints 将不会知道此更新，并且仍会引用空数组（您之前指出的）。

下面的sn-p会很容易理解

//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

Explaining Value vs. Reference in Javascript

【讨论】：