在系列具有正确原型的地方创建Highcharts的功能

Roger 发表于 Dev

罗杰

我正在尝试编写一个将高图添加到页面的函数，以及一个可以基于流API更新该图表数据的函数。我添加了setInterval以模拟流式API。

问题发生在第80行。我相信是因为我没有正确设置图表对象的序列数组。当我需要通过'addPoint'添加新数据时，原型就不存在了。我的AddChart函数缺少什么，该函数将系列连接到highcharts？

$(function () {
    $(document).ready(function () {
        var metrics = [];

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        function AddChart(metric) {
            $("#divMain").append('<div id="' + metric.key + '" style="min-width: 310px; height: 200px; margin: 0 auto"></div>');
            $('#' + metric.key).highcharts({
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,

                },
                title: {
                    text: metric.Title
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },
                yAxis: {
                    title: {
                        text: 'Messages'
                    },
                    plotLines: [
                        {
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }
                    ]
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                series: metric.series
        });
        };



        function ParseData(message) {

            var jsonObj = JSON.parse(message);

            $.each(jsonObj.Metrics, function(index, value) {
                var metricName = value.Metric.Name.replace(' ', '');
                if (metrics[metricName] == undefined) {

                    metrics[metricName] = {
                        "title": value.Metric.Name,
                        "key": metricName,
                        "series": [
                            {
                                name: value.Metric.Name,
                                data: []
                            }
                        ],
                    }

                    AddChart(metrics[metricName]);
                }

                metrics[metricName].series.addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
            });
        };

        setInterval(function () {

            var m = "{\"Metrics\": [{\"Metric\":{\"Name\":\"Queue 01\",\"CurrentValue\":\"0\",\"TimeStamp\":\"\\\x2FDate(1415826323291)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 02\",\"CurrentValue\":\"3\",\"TimeStamp\":\"\\\x2FDate(1415826323344)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 03\",\"CurrentValue\":\"9\",\"TimeStamp\":\"\\\x2FDate(1415826323405)\\\x2F\"}}]}";

            ParseData(m);
        }, 1000);
    });
});

标记

首先，您已metrics声明为数组。应该是一个空对象：

var metrics = {};

其次，您创建的数据结构metrics[metricName].series不是Highcharts系列对象。这是您创建的对象，用于提供Highcharts数据。要获得真实的系列对象，您必须从图表中将其取回。

 // getting the chart from the DOM, then the first series...
 $("#"+metricName).highcharts().series[0].addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);

更新小提琴。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。