Chart.js 使用 SignalR 时未定义 addData
Chart.js addData is undefined when using SignalR
我正在尝试从 signalR 回调中调用 Chart.js 的 addData 方法,以便根据服务器输入将数据动态添加到图表。但是,当触发回调时,Chart.js 上的 addData 方法抛出异常:
Uncaught TypeError: window.myChart.addData is not a function
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);
}
}
}
}
根据文档,您应该直接更改数据集并调用更新:
.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.
我在这个fiddle上做了一点测试功能:
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
编辑
实时图表(我也在用signalr,我用的是visjs)
http://visjs.org/examples/graph2d/15_streaming_data.html
祝你有美好的一天!
我正在尝试从 signalR 回调中调用 Chart.js 的 addData 方法,以便根据服务器输入将数据动态添加到图表。但是,当触发回调时,Chart.js 上的 addData 方法抛出异常:
Uncaught TypeError: window.myChart.addData is not a function
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);
}
}
}
}
根据文档,您应该直接更改数据集并调用更新:
.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.
我在这个fiddle上做了一点测试功能:
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
编辑
实时图表(我也在用signalr,我用的是visjs)
http://visjs.org/examples/graph2d/15_streaming_data.html
祝你有美好的一天!