Question

我尝试从signalR回调中调用Chart.js的addData方法，以便根据服务器输入动态地将数据添加到图表中。但是，当触发回调时，Chart.js上的addData方法抛出异常：

未捕获的TypeError：window.myChart.addData不是函数

使用Javascript：

var ctx = $("#myChart");
    window.myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        },
        responsive: true
    });


    $(function () {
        var chart = $.connection.chartHub;

        chart.client.addPointToChart = function () {
            window.myChart.addData([20], "Magenta");
        };
        $.connection.hub.start().done(function () {
            chart.server.start();
        });
    });

C＃（中心代码）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace dvvWeb.Hubs
{
public class ChartHub : Hub
{
    public void Start()
    {
        while (true)
        {
            Clients.All.addPointToChart();
            System.Threading.Thread.Sleep(10000);
        }
    }
}
}

Answer 1

根据文档，您应该直接更改数据集并调用update：

.update(duration, lazy)更新数据的功能

// duration is the time for the animation of the redraw in miliseconds
// lazy is a boolean. if true, the animation can be interupted by other animations
myLineChart.data.datasets[0].data[2] = 50; // Would update the first dataset's value of 'March' to be 50
myLineChart.update(); // Calling update now animates the position of March from 90 to 50.

我在这个小提琴上做了一点测试功能：

setInterval(function(e) {
console.log(myDoughnutChart.data.datasets[0]);
  myDoughnutChart.data.datasets[0].data.push(15);
  myDoughnutChart.update();
}, 1000);

https://jsfiddle.net/Tintin37/weLoqyby/

已打开的问题：https://github.com/chartjs/Chart.js/issues/1997

修改

对于实时图表（我也使用信号器，我使用visjs）

http://visjs.org/examples/graph2d/15_streaming_data.html

祝你有美好的一天！

使用SignalR时，Chart.js addData未定义

1 个答案: