[英]HighCharts with Dynamic Data not working
I have a ASP.NET MVC project with SignalR. 我有一个带SignalR的ASP.NET MVC项目。
I have a page with a HighChart and the script looks like this: 我有一个带有HighChart的页面,脚本如下所示:
$(function () {
window.Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10
},
title: {
text: 'GMAS Queues'
},
xAxis: {
type: 'datetime',
tickInterval: 500,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Queue Count'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Processing Queues'
}]
});
});
$.connection.hub.logging = true;
// Reference the auto-generated proxy for the hub.
var chartData = $.connection.processingQueuesHub;
// Create a function that the hub can call back to display messages.
chartData.client.updateQueueCounts = function (data) {
//$.each(data, function(i, item) {
// // Add the message to the page.
// $('#chartDataLog').append('<li><strong>' + htmlEncode(item.QueueName)
// + '</strong>: ' + htmlEncode(item.Length) + '</li>');
//});
// set up the updating of the chart.
var series = chart.series[0];
$.each(data, function (i, item) {
if (item.QueueName == "Queue A") {
var x = Date.parse(item.Date),
y = item.Length;
series.addPoint([x, y], true, false);
}
});
};
However, I see the graph but not the points. 但是,我看到的是图形而不是点。
The strange part is the series data points are there:
奇怪的是,这里有系列数据点:
Anyone know why HighCharts is not rendering the points? 有人知道为什么HighCharts不显示点吗?
Thanks, Bill N 谢谢,比尔·N
I have to thank my good friend and co developer for figuring this out. 我必须感谢我的好朋友和共同开发人员解决了这个问题。 He is a smarter and braver man than me.
他是一个比我聪明,勇敢的人。 :) He went to the highcharts source and found that the highcharts breaks if you add to the graph series before the initial animation is completed.
:)他转到highcharts源,发现如果在完成初始动画之前添加到图形系列中,highcharts将中断。 The animation is why the clip-rect is zero-width (it animates from zero to full width over 1s when you first create the chart).
动画就是为什么clip-rect为零宽度的原因(当您首次创建图表时,它会在1秒内从零到全角动画)。 You end up adding a point to the series before this animation even really starts.
您最终在动画真正开始之前就向该系列添加了一个点。 This kills the animation but it doesn't fix the width of the clip-rect.
这会杀死动画,但不能固定剪辑矩形的宽度。 The fix is to add animation is false for the series.
修复方法是添加动画对于该系列是错误的。
series: [{ name: 'Processing Queues', data: [], animation: false }]
It looks like you are not defining what your chart.series
is until it is created. 似乎您没有定义
chart.series
是什么,直到它被创建。 The line in your ajax is as follows and its not waiting for DOM ready: 您的ajax中的行如下所示,并且它不等待DOM准备就绪:
var series = chart.series[0];
But you do not define chart
until $(document).ready(function () {...
. Try keeping your chart object in scope of your ajax. 但是,直到
$(document).ready(function () {...
才定义chart
。请尝试将图表对象保持在ajax范围内。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.