Question

我正在编写一个动态图表（监视器应用程序）xAxis是日期时间类型，每三秒钟我从数据库中提取数据并为每个系列添加新点（到目前为止一直很好）。问题来自勾选，每次我添加一个新点时所有刻度都占用当前时间而不是在创建时保持原始值这是我的代码

var chart1Obj = {
        chart: {
            renderTo: 'welcome-chart',
            type: 'line',
            animation: Highcharts.svg, // don't animate in old IE
            // marginRight: 10,
            events: {
                load: function () {
                    // set up the updating of the chart each second
                    var series = this.series;
                    setInterval(function () {
                        Meteor.call("getGraphData", function (error, json) {
                            if (error) {
                                console.error("Welcome.graphData() failed\n", error);
                            } else {
                                temp = JSON.parse(json);
                                series[0].addPoint([temp.running], true, true);
                                series[1].addPoint([temp.queued], true, true);
                                series[2].addPoint([temp.suspended], true, true);
                            }
                        });
                    }, 3000);
                }
            }
        },
        title: {
            text: 'Job monitoring'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            labels: {
                formatter: function () {
                    var myTime = new Date();
                    return Highcharts.dateFormat('%H:%M:%S', myTime.getTime());
                }
            }
        },
        yAxis: {
            title: {
                text: 'Number of Task'
            },
            floor: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
                }]
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'Running',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            width: 1,
            color: '#00FF00'
        }, {
            name: 'Queued',
            width: 2,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            color: '#FFFF00'
        }, {
            name: 'Suspended',
            width: 3,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            color: '#FF0000'
        }]
    };

    Highcharts.setOptions({
        global: {
            useUTC: false,
        }
    });
    var chart1 = new Highcharts.Chart(chart1Obj);

所以问题是，我做错了什么？或者我错过了什么？

Answer 1

由这些线引起的：

        labels: {
            formatter: function () {
                var myTime = new Date();
                return Highcharts.dateFormat('%H:%M:%S', myTime.getTime());
            }
        }

new Date()将使用实际时间创建日期对象。然后在刻度标签中为每个标签使用该日期。只需使用：

return Highcharts.dateFormat('%H:%M:%S', this.value);

如何动态添加xAxis.tick

1 个答案: