Question

我遇到的问题是让我的数据显示在X轴上发送的数据失效。什么应该被视为线上的差距只是被合并到同一条线，例如在这个img数据从早上4点到早上9点由于互联网出来但线路没有失效。 enter image description here

这是我目前的示例代码。

$.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/

Answer 1

要在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
    }]
}]

Answer 2

plotOptions.series.gapSize是正确答案。

定义何时在图表中显示间隙。间隙大小为5意味着如果两点之间的距离大于的两倍两个最接近的点，图表将被打破

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

 plotOptions: {
  series: {
    gapSize: 6,
    . . .

Answer 3

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

显示X轴缺口 - Highstocks

3 个答案: