动态数据不起作用的HighCharts

时间:2015-06-10 16:10:50

标签: javascript asp.net-mvc highcharts signalr-hub

我有一个带有SignalR的ASP.NET MVC项目。

我有一个包含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);
        }
    });


};

但是,我看到图表而不是点数。Chart with no points 奇怪的部分是系列数据点: Chrome shows the data points

任何人都知道为什么HighCharts没有渲染积分?

谢谢,Bill N

2 个答案:

答案 0 :(得分:1)

我要感谢我的好朋友和合作开发人员搞清楚这一点。他比我更聪明,更勇敢。 :)他去了highcharts源,发现如果在初始动画完成之前添加到图形系列中,高图会中断。动画是clip-rect为零宽度的原因(当您第一次创建图表时,它会在1秒内从零动画到全宽度)。在这个动画真正开始之前,你最终会在系列中添加一个点。这会杀死动画,但它不会修复剪辑矩形的宽度。修复是为系列添加动画是假的。

series: [{ name: 'Processing Queues', data: [], animation: false }]

答案 1 :(得分:0)

在创建chart.series之前,您似乎没有定义var series = chart.series[0]; 。你的ajax中的行如下所示,它不等待DOM就绪:

chart

但是在$(document).ready(function () {...之前你没有定义void main() { struct a { char ch[10]; char *str; }; struct a s1={"Hyderabad","Bangalore"}; printf("%c%c",s1.ch[0],*s1.Str[0]); printf("\t%s%s",s1.ch,s1.str); getch(); } 。尝试将图表对象保留在ajax的范围内。