Javascript 查特；asp.net:无法读取属性'；标签'；未定义的

我已经浏览了所有关于这个问题的帖子，但我无法修复它

我的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'
            }
        }
    });
}

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

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

尝试更新图表时出错

$.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();
}

控制台输出 您可以看到它正确地将“chart:myChart”写入控制台，显示我们的对象引用正确。

调用js函数的asp代码（在这里一切都很好）

html：一切都很好

$(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'
            }
        }
    });
}

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

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

---

提前感谢您

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);
    ...
}

---

看看这个，是的，我读过那个帖子，他的错误是关于他创建初始图表的顺序。这是不同的，因为我已经正确地创建了我的初始图表，现在正在尝试向它“添加”数据，并且我在前面的行中有对象引用。我在搜索以前的帖子时做了很多工作，谢谢thoughok，你能在var chart=document.getElementById（chartID）中添加一个console.log（labels）吗；日志（“图表：+chart.id”）；图表.数据.标签.推送（标签）；是的，我会试试，然后报告谢谢你。。。labels是我传递的数据的v，你是说chart.data.labelsconsole.log（labels）输出我正确传递的数据：数组（2）0:“9:36”1:“9:37”长度：2&console.log（chart.data.labels）的相同错误；成功了！但是如果我有多个图表，比如myChart1，myChart2。。。如何在addData函数中传递chartID以选择所需的图表？谢谢大家!@MX313假设

chartID

已经作为

canvas

元素的

id

属性传递（基于您的代码），那么您可能可以将图表引用存储在数组中，例如

var charts=[]然后
图表[“myChart”]=新图表…
。然后通过
图表[chartID].data…
访问正确的图表。