chartjs & asp.net：无法读取未定义的属性“标签”

Question

我已经浏览了有关此问题的所有帖子，但我无法解决它。

我的 chartjs 折线图创建得很好。我正在尝试测试更新它（添加数据），但我被困在 chart.data.labels.push(labels) 上，因为它指出对象在控制台中未定义。然而在控制台上，前一行，我写了对象的 id，它是正确的，所以它有 ref。

有什么想法吗？

图表创建良好

$(function () {
    LoadChart();
});

function LoadChart() {
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['9:30', '9:31', '9:32', '9:33', '9:34', '9:35'],
            datasets: [{
                label: 'RSI',
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }]
        },
        options: {
           title: {
                display: true,
                text: 'Custom Chart Title'
            }
        }
    });
}

尝试更新图表时出错

$.connection.redisHub.client.addData = function (chartID, labels, data) {
    var chart = document.getElementById(chartID);
    console.log("chart: " + chart.id);
    chart.data.labels.push(labels);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

控制台输出 您可以看到它正确地将“图表：myChart”写入控制台，显示我们有对象 ref。正确的。

asp代码调用js函数（这里一切正常）

string[] labels = { "9:36", "9:37" };
int[] data = { 9, 10 };
Clients.All.addData("myChart", labels, data); 

html : 一切顺利

<div class="col-sm-8">
    <canvas id="myChart" width="400" height="200"></canvas>
</div>

提前谢谢你

Answer 1

var chart = document.getElementById(chartID);会返回canvas元素，它不是Chart.js的实例，所以后面的代码都是无效的。

您需要使用 LoadChart() 函数中的 myChart，因为这是一个 Chart.js 实例（在实例化时返回）。执行此操作的最简单方法是将变量定义移动到更高的范围，以便您的更新函数可以使用它。

如果不知道代码的结构，很难给出一个可行的例子，但这里有一个简单的例子来说明我的意思：

var myChart;

$(function () {
    LoadChart();
});

function LoadChart() {
    var ctx = document.getElementById('myChart');
    myChart = new Chart(ctx, {
        type: 'line',
    ...
}

$.connection.redisHub.client.addData = function (chartID, labels, data) {
    myChart.data.labels.push(labels);
    ...
}