javascript - 具有动态数据的 HighCharts 不起作用

Question

我有一个使用 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);
        }
    });


};

但是，我看到了图表，但没有看到点。 奇怪的是系列数据点在那里:

有人知道为什么 HighCharts 不渲染点吗？

谢谢，比尔 N

Answer 1

我必须感谢我的好 friend 和共同开发者解决了这个问题。他是一个比我更聪明、更勇敢的人。 :) 他访问了 highcharts 源代码，发现如果在初始动画完成之前添加到图形系列，则 highcharts 会中断。动画是剪辑矩形为零宽度的原因(当您第一次创建图表时，它会在 1 秒内从零到全宽度进行动画处理)。在该动画真正开始之前，您最终会向该系列添加一个点。这会终止动画，但不会修复剪辑矩形的宽度。修复方法是为该系列添加动画为 false。

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