2

我在获取我的数据以显示 X 轴上发送的数据的失效时遇到问题。应该被视为行中的间隙只是被合并到同一行中，例如在这个 img 中，由于互联网中断，数据从凌晨 4 点到上午 9 点，但行中没有中断。在此处输入图像描述

这是我目前拥有的示例的代码。

$.getJSON('mkjson.php?device=<?echo $device_name;?>&sensor=<?echo $sensor_name;?>&pin=<?echo $pin;?>&user=<?echo $_SESSION['user'];?>', function(data) {
    // Create the chart
    window.chart = new Highcharts.StockChart({
    credits : {
            enabled : false
        },
        chart : {
            renderTo : 'container',
            zoomType: 'x'
        },

        rangeSelector : {
            selected : 1
        },

        title : {

            text : 'Device:<?echo $device_name;?>'
        },
        subtitle : {
            text : 'Sensor:<?echo $sensor_name;?>'

        },

        xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            second: '%m-%d<br/>%l:%M:%S%p',
            minute: '%m-%d<br/>%l:%M%p',
            hour: '%m-%d<br/>%l:%M%p',
            day: '%m-%d',
            week: '%m-%d',
            month: '%Y-%m',
            year: '%Y'
        }
    },

        yAxis : {
            min: <?echo $yaxis_min;?>,
            max: <?echo $yaxis_max;?>,
            title : {               
                text : '<?echo $unit?>'
            },
            <?if(isset($alert1) ||isset ($alert2)){?>
            plotLines: [{
                color: '#FF0000',
                width: 1,
                value: <?echo $alert1;?>
            }, {
                color: '#FF0000',
                width: 1,
                value: <?echo $alert2;?>
            }]
            <?}?>

        },

        rangeSelector : {
            buttons : [{
                type : 'minute',
                count : 10,
                text : '10m'
            }, {
                type : 'hour',
                count : 1,
                text : '1H'
            }, 
            {
                type : 'day',
                count : 1,
                text : '1D'
            },
            {
                type : 'day',
                count : 3,
                text : '3D'
            }],
            selected : 3,
            inputEnabled : false
        },          

        series : [{
            name : '<?echo $unit;?>',
            data : data,
            tooltip: {
            valueDecimals: 2,
        formatter: function() {
            return Highcharts.numberFormat(this.y, 2);
        }},
            dataGrouping: {
            enabled: true
            }
        }]
    });
});

这也是来自 jsfiddle 中 highstocks 的示例，我试图用它来看看他们是如何完成它的。

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/data-grouping/

4

3 回答 3

2

要在 Highcharts 中添加间隔，您必须指定间隔结束的时间。为此，您必须将其null用作数据点，例如：

series: [{
    data: [{ 
        x: Date.UTC(2012,1,1,4,0,0,0),
        y: 24
    },{ 
        x: Date.UTC(2012,1,1,4,0,0,1), //to create a gap
        y: null
    },{ 
        x: Date.UTC(2012,1,1,9,0,0,0), //new data comes
        y: 24
    }]
}]
于 2013-02-12T13:02:21.973 回答
1

plotOptions.series.gapSize是正确答案。

定义何时在图表中显示间隙。间隙大小为 5 表示如果两点之间的距离大于两个最近点的距离的五倍，则图形将被破坏

对于每小时时间序列，我使用 6。当数据停止超过 6 小时时。

 plotOptions: {
  series: {
    gapSize: 6,
    . . .
于 2015-06-16T02:02:52.450 回答
0

如果您切换到柱形图（或者可能是散点图），您会更好地看到各个数据点，而 Highstock 不会将它们与线条连接起来。Paweł 表示，Highstock 不知道缺少任何数据——它旨在平滑连接您提供给它的时间序列数据。

于 2014-01-01T01:06:45.350 回答