highcharts - 显示 X 轴间隙 -- Highstocks

Question

我在获取数据以显示 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/

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