2

X 軸で送信されるデータの経過を示すデータを取得する際に問題が発生しています。ラインのギャップとして見られるべきものは、同じラインにマージされているだけです。たとえば、この画像では、インターネットが切断されているため、データは午前 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 は、2 つのポイント間の距離が最も近い 2 つのポイントの距離の 5 倍を超える場合、グラフが壊れることを意味します。

1 時間ごとの時系列の場合、6 を使用します。データが 6 時間以上停止した場合。

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

縦棒グラフ (または散布図) に切り替えると、個々のデータ ポイントが見やすくなり、Highstock はそれらを線で結びません。Paweł 氏によると、Highstock はデータが欠落していることを知りません。提供された時系列データをスムーズに接続するように設計されています。

于 2014-01-01T01:06:45.350 に答える