2

我在一个 android 应用程序中使用 highchart 来显示一个动态图表,该图表每 3 秒更新一次并显示超过一天。

我的图表由两个固定数据系列组成,显示监控数据不应超过的限制,显然监控数据(功率值)从 00:05 到加载图表的那一刻的所有功率值,首先显示。然后,每 3 秒,这个系列就会增加一个值。

问题是当我尝试缩放到功率值的终点时。当我放大时,电源数据线(只有这一条)消失。如果我缩小,该线会重新出现。但是,如果我放大未显示数据电源线端点的区域,则一切正常。

我试图删除两个固定系列(它将我的图表高度调整为电源数据线的长度,但无论如何),并且出现了相同的缩放问题。我无法缩放到电源数据线的终点,但可以缩放到其他任何地方。我也尝试使用数据分组,但问题保持不变

这是我的代码:

$(function() {
 $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: true
            }
        });

var dataPower = Android.getDayHistory((new Date()).getHours(), (new Date()).getMinutes(), (new Date()).getSeconds());
//var dataPower = [];
console.log(dataPower);

// Create the chart
$('#container').highcharts(
        'StockChart',
        {

            chart : {
                type : 'line',
                backgroundColor : '#d6d7d4',
                ignoreHiddenSeries: false, 
                zoomType : 'x',

                marginRight : 10,
                events : {
                    load : function() {

                        // set up the updating of the chart each second
                        var series = this.series[0];

                        setInterval(function() {
                            var x = (new Date()).getTime(), // current time
                            y = Android.getData((new Date()).getHours(),(new Date()).getMinutes(), (new Date()).getSeconds());
                            series.addPoint([ x, y ]);

                            Android.checkAlert((new Date()).getHours(),(new Date()).getMinutes(), (new Date()).getSeconds());
                        }, 3000);
                    }
                },
            },

            rangeSelector : {
                buttons : [ {
                    type : 'minute',
                    count : 2,
                    text : '2m'
                }, {
                    type : 'minute',
                    count : 5,
                    text : '5m'
                }, {
                    type : 'minute',
                    count : 30,
                    text : '30m'
                }, {
                    type : 'hour',
                    count : 1,
                    text : '1h'
                }, {
                    type : 'all',
                    text : 'All'
                } ],
                selected : 4,
                inputEnabled : false,
            },

            xAxis : {
                ordinal : false,
                minRange : 36000
            },

            yAxis : {
                title : {
                    text : 'Power (MW)'
                },
                max : 500,
                plotBands : [ {
                    from : 0,
                    to : 100,
                    color : 'rgba(247, 247, 247, 0.3)'
                }, {
                    from : 100,
                    to : 200,
                    color : 'rgba(215, 216, 212, 0.3)'
                }, { // Light breeze
                    from : 200,
                    to : 300,
                    color : 'rgba(247, 247, 247, 0.3)'
                }, { // Light breeze
                    from : 300,
                    to : 400,
                    color : 'rgba(215, 216, 212, 0.3)'
                }, {
                    from : 400,
                    to : 500,
                    color : 'rgba(247, 247, 247, 0.3)'
                } ]
            },

            plotOptions: {
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            enabled: true,
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled : true,
                                radius: 5,
                                lineWidth: 1
                            }
                        }  
                    }      
                }
            },


            title : {},

            subtitle : {},

            navigator : {
                enabled : false

            },
            scrollbar : {
                enabled : false
            },

            credits : {
                enabled : false
            },

            series : [
                    {
                        name : 'Power',
                        data : eval('[' + dataPower + ']'),
                        pointStart : Date.UTC((new Date()).getFullYear(),
                                (new Date()).getMonth(), (new Date()).getDate()),
                        pointInterval : 3000,

                    },
                    {
                        data : [
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 0,
                                                5, 0), 40 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 7,
                                                0, 0), 40 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 7,
                                                30, 0), 440 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 11,
                                                57, 0), 440 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 12,
                                                3, 0), 390 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 13,
                                                57, 0), 390 ]
                                ,
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 14,
                                                3, 0), 440 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 17,
                                                3, 0), 440 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 23,
                                                55, 0), 40 ] 
                                                ],
                        type : 'line',
                        color : "#d3a6ad",
                        enableMouseTracking : false
                    },
                    {
                        data : [
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 0,
                                                5, 0), 60 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 7,
                                                0, 0), 60 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 7,
                                                30, 0), 460 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 11,
                                                57, 0), 460 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 12,
                                                3, 0), 410 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 13,
                                                57, 0), 410 ]
                                ,
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 14,
                                                3, 0), 460 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 17,
                                                3, 0), 460 ],
                                [
                                        Date.UTC(
                                                (new Date()).getFullYear(),
                                                (new Date()).getMonth(),
                                                (new Date()).getDate(), 23,
                                                55, 0), 60 ]
                                ],
                        type : 'line',
                        color : "#d3a6ad",
                            enableMouseTracking : false
                    } ]

        });
 });
});
4

0 回答 0