HightCharts实时线路错误

时间:2016-08-09 03:14:37

标签: highcharts real-time

HightCharts realtime line error

谁有以下问题?

1 个答案:

答案 0 :(得分:0)

var loadChart = function () {
        $.getJSON('data.json', function (json) {
            var index = 0;

            var getData = function (index, type) {
                var result = null;
                if (type != undefined) {
                    result = parseInt(json[index][type]);
                } else {
                    result = json[index];
                }
                return result;
            };

            var getSeriesData = function () {
                // 结构
                var JJData = [],
                    PCData = [],
                    PhoneData = [],
                    item;
                var time = (new Date()).getTime();

                for (var i = -179; i <= 0; ++i) {
                    item = json[index++];
                    JJData.push({
                        x: time + i * 2000,
                        y: parseInt(item.JJ)
                    });
                    PCData.push({
                        x: time + i * 2000,
                        y: parseInt(item.PC)
                    });
                    PhoneData.push({
                        x: time + i * 2000,
                        y: parseInt(item.Phone)
                    });
                }
                var result = [{
                    name: "JJ",
                    data: JJData
                }, {
                    name: "PC",
                    data: PCData
                }, {
                    name: "Phone",
                    data: PhoneData
                }];
                return result;
            };

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container1',
                    type: 'spline', //spline
                    backgroundColor: 'rgba(202, 202, 202, 0.2)',
                    animation: Highcharts.svg, // don't animate in old IE
                    //marginRight: 10,
                    events: {
                        load: function () {
                            var series = this.series;

                            loadMinuteData = function () {
                                if (!minuteFlag) {
                                    clearInterval(setMinuteInter);

                                    return false;
                                }
                                var x = (new Date()).getTime(); // current time
                                var result = getData(index++);
                                // 第三个参数为true,移除最开始的数据
                                //console.log("minute");
                                //console.log(series[0]);
                                //alert(series[0]);
                                series[0].addPoint([x, parseInt(result.JJ)], true, true);
                                series[1].addPoint([x, parseInt(result.PC)], true, true);
                                series[2].addPoint([x, parseInt(result.Phone)], true, true);
                            };
                            var setMinuteInter = setInterval(loadMinuteData, 2000);
                        }
                    }
                },
                title: {
                    text: '实时在线人数'
                },
                xAxis: [{
                    type: 'datetime',
                    tickPixelInterval: 60
                }],
                yAxis: {
                    title: {
                        text: '人数'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                plotOptions: {
                    spline: {
                        marker: {
                            enabled: false
                        }
                    }
                },
                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: true
                },
                exporting: {
                    enabled: false
                },
                series: getSeriesData()
            });
        });
    }