1

我尝试在 highstock 折线图中绘制一些数据库数据。我的数据以 json 格式加载到图表中，如下所示：

[[1383042797000,551.11] , [1383042812000,551.11] , [1383042827000,551.11] , [1383042842000,567.78] , [1383042857000,567.78] , [1383042872000,567.78] , [1383042887000,567.78] , [1383042902000,584.44] , [ 1383042917000,601.11] , [1383042932000,601.11] , [1383042947000,617.78] , [1383042962000,634.44] , [1383042977000,634.44] , [1383042992000,634.44] , [1383043007000,634.44] , [1383043022000,634.44] , [1383043037000, 651.11] , [1383043052000,651.11] , [1383043067000,667.78] , [1383043082000,667.78] , [1383043098000,667.78] , [13830431113000,667.78]

所以我有一个以毫秒为单位的特定时间戳和每个点的值。

如果时间戳每 15 秒计数一次，则该图表可以很好地显示我的数据。但是作为它的机器数据，我有几个小时甚至几天的机器关闭时间暂停，在这个时候我没有得到数据库条目......

现在图表没有在图表中显示“gabs”，因为没有数据所以有意义，但它忽略了暂停并直接显示新值......

puh我希望你能关注我......这里有一个例子：

11 月 8 日，机器在 14:59 关闭，下一个值是 11 月 11 日。06:00 但图表跳过了这两个日期之间的时间，并显示它们彼此相邻......

我需要图表来显示从我的第一个值到最后一个值的整个时间段！有人知道该怎么做吗？

这是我的图表的js代码：

(function($){ 

$(function() {

    $.getJSON('http://jsonData', function(data) {
        $('#container').highcharts('StockChart', {
            chart: {
            },
             xAxis: {
                    type: 'datetime'
                },

            series : [{
                data : data,
                turboThreshold: 100000

            }]

        });
    });

});

})(jQuery);

在此先感谢您的帮助 ：）！！

干杯J！

4

3 回答 3

1

我假设您调用从数据库获取数据的函数，即每 3 秒或其他常规时间。因此，当您无法从数据库中获取数据时，您可以在系列中添加空点。

于 2013-11-12T14:56:27.583 回答
0

这是我在 JSFiddle 中的示例：

按照这个链接http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/ticks/然后试试这个代码：

$(function() {
    var data = [
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8],
[1231635600000, 0.0, 7.6],
[1231722000000, 5.6, 9.4],
[1231808400000, 3.6, 6.5],
[1231894800000, -3.6, 3.8],
[1231981200000, -6.0, -1.5],
[1232067600000, -3.8, 2.4],
[1232154000000, 1.5, 4.2],
[1232240400000, 0.0, 4.5],
[1232326800000, -1.1, 3.6],
[1232413200000, 0.5, 5.1],
[1232499600000, 0.0, 2.5],
[1232586000000, -0.6, 2.1],
[1232672400000, 0.8, 4.7],
[1232758800000, 0.6, 4.4],
[1232845200000, -3.9, 1.4],
[1232931600000, -4.3, 2.0],
[1233018000000, -6.1, -0.4],
[1233104400000, -0.3, 1.9],
[1233190800000, -2.9, 2.7],
[1233277200000, -4.0, -1.0],
[1233363600000, -4.4, -1.9],
/* 2009-02-01 */
[1233450000000, -5.0, -2.7],
[1233536400000, -5.2, -2.3],
[1233622800000, -6.3, -0.6],
[1233709200000, -5.4, -0.6],
[1233795600000, -2.1, 1.4],
[1233882000000, -4.6, 1.5],
[1233968400000, -5.4, 0.6],
[1234054800000, -8.7, -2.6],
[1234141200000, -5.2, 1.3],
[1234227600000, -8.6, -2.2],
[1234314000000, -8.5, 0.1],
[1234400400000, -4.8, 1.7],
[1234486800000, -8.3, 1.4],
[1234573200000, -8.6, 1.1],
[1234659600000, -3.2, 1.5],
[1234746000000, -0.7, 4.1],
[1234832400000, 0.2, 3.2],
[1234918800000, 0.0, 3.9],
[1235005200000, 1.2, 4.5],
[1235091600000, 1.3, 5.7],
[1235178000000, 1.0, 2.3],
[1235264400000, 1.1, 5.5],
[1235350800000, 1.0, 6.5],
[1235437200000, 0.9, 3.7],
[1235523600000, 1.5, 4.3],
[1235610000000, 0.5, 5.4],
[1235696400000, -4.9, 3.8],
[1235782800000, -5.4, 1.4],
/* 2009-03-01 */
[1235869200000, -1.9, 4.0],
[1235955600000, 0.9, 8.1],
[1236042000000, 1.7, 8.1],
[1236128400000, 0.0, 9.1],
[1236214800000, 2.5, 7.7],
[1236301200000, 2.1, 5.6],
[1236387600000, 1.5, 6.9],
[1236474000000, 0.6, 7.9],
[1236560400000, 1.9, 9.4],
[1236646800000, 1.8, 7.0],
[1236733200000, 0.2, 8.6],
[1236819600000, -0.3, 5.9],
[1236906000000, 1.6, 8.3],
[1236992400000, -0.4, 8.8],
[1237078800000, -2.0, 5.4],
[1237165200000, 2.2, 6.7],
[1237251600000, 0.0, 7.2],
[1237338000000, 0.8, 9.3],
[1237424400000, -1.7, 7.5],
[1237510800000, -2.0, 6.3],
[1237597200000, -0.3, 5.7],
[1237683600000, 1.7, 5.9],
[1237770000000, -0.8, 5.7],
[1237856400000, -3.5, 5.7],
[1237942800000, -2.6, 5.0],
[1238029200000, -0.7, 8.0],
[1238115600000, -2.8, 6.0],
[1238202000000, -2.9, 6.1],
[1238288400000, 0.3, 7.0],
[1238371200000, 0.5, 7.5],
[1238457600000, 1.6, 4.7],
/* 2009-04-01 */
[1238544000000, -1.4, 7.3],
[1238630400000, 2.8, 6.8],
[1238716800000, 3.4, 12.0],
[1238803200000, 0.6, 13.5],
[1238889600000, 5.5, 8.3],
[1238976000000, 3.3, 8.3],
[1239062400000, 0.6, 13.5],
[1239148800000, 3.0, 13.7],
[1239235200000, 6.6, 15.2],
[1239321600000, 5.6, 10.3],
[1239408000000, 5.6, 15.2],
[1239494400000, 4.1, 10.0],
[1239580800000, 0.4, 11.8],
[1239667200000, 0.5, 13.6],
[1239753600000, 3.8, 15.6],
[1239840000000, 6.0, 11.6],
[1239926400000, 3.9, 13.9],
[1240012800000, 0.8, 14.3],
[1240099200000, 2.9, 17.3],
[1240185600000, 7.1, 12.2],
[1240272000000, 2.4, 12.9],
[1240358400000, 4.7, 12.9],
[1240444800000, 2.0, 16.3],
[1240531200000, 9.5, 17.4],
[1240617600000, 3.4, 16.7],
[1240704000000, 6.7, 19.1],
[1240790400000, 4.9, 15.8],
[1240876800000, 8.4, 15.3],
[1240963200000, 4.1, 18.6],
[1241049600000, 6.6, 19.9],
/* 2009-05-01 */
[1241136000000, 8.7, 21.4],
[1241222400000, 9.2, 16.4],
[1241308800000, 6.2, 12.9],
[1241395200000, 0.0, 13.4],
[1241481600000, 4.5, 11.2],
[1241568000000, 3.2, 14.3],
[1241654400000, 3.1, 13.7],
[1241740800000, 6.4, 14.6],
[1241827200000, 5.0, 13.5],
[1241913600000, 4.8, 11.5],
[1242000000000, 3.5, 13.0],
[1242086400000, 4.5, 15.0],
[1242172800000, 2.0, 17.0],
[1242259200000, 4.3, 18.3],
[1242345600000, 4.5, 18.8],
[1242432000000, 8.0, 20.7],
[1242518400000, 7.4, 20.7],
[1242604800000, 8.4, 17.7],
[1242691200000, 8.3, 15.2],
[1242777600000, 8.3, 17.9],
[1242864000000, 6.7, 17.0],
[1242950400000, 7.6, 17.5],
[1243036800000, 6.6, 17.3],
[1243123200000, 8.7, 17.7],
[1243209600000, 8.9, 17.7],
[1243296000000, 8.4, 11.5],
[1243382400000, 5.9, 14.2],
[1243468800000, 5.1, 16.9],
[1243555200000, 8.3, 16.0],
[1243641600000, 6.2, 22.6],
[1243728000000, 7.8, 22.6],
/* 2009-06-01 */
[1243814400000, 7.3, 21.7],
[1243900800000, 8.7, 16.2],
[1243987200000, 7.3, 13.9],
[1244073600000, 3.9, 15.5],
[1244160000000, 6.4, 17.3],
[1244246400000, 2.9, 17.9],
[1244332800000, 3.9, 17.9],
[1244419200000, 6.5, 16.8],
[1244505600000, 8.0, 14.2],
[1244592000000, 7.8, 16.2],
[1244678400000, 8.6, 15.3],
[1244764800000, 8.2, 18.2],
[1244851200000, 9.5, 17.0],
[1244937600000, 5.7, 18.7],
[1245024000000, 7.0, 16.9],
[1245110400000, 4.3, 15.8],
[1245196800000, 3.6, 19.1],
[1245283200000, 10.8, 15.0],
[1245369600000, 8.6, 16.3],
[1245456000000, 10.7, 17.0],
[1245542400000, 9.7, 18.9],
[1245628800000, 9.8, 20.6],
[1245715200000, 12.8, 19.5],
[1245801600000, 8.6, 24.1],
[1245888000000, 10.9, 26.6],
[1245974400000, 13.5, 28.0],
[1246060800000, 12.5, 23.2],
[1246147200000, 14.0, 28.1],
[1246233600000, 14.9, 29.5],
[1246320000000, 16.9, 22.5],
/* 2009-07-01 */
[1246406400000, 14.3, 27.7],
[1246492800000, 14.5, 27.8],
[1246579200000, 15.5, 29.6],
[1246665600000, 16.7, 30.7],
[1246752000000, 16.5, 25.0],
[1246838400000, 17.8, 25.7],
[1246924800000, 13.5, 24.8],
[1247011200000, 10.5, 21.4],
[1247097600000, 9.2, 23.8],
[1247184000000, 11.6, 21.8],
[1247270400000, 10.7, 23.7],
[1247356800000, 11.0, 23.3],
[1247443200000, 11.6, 23.7],
[1247529600000, 11.8, 20.7],
[1247616000000, 12.6, 22.4],
[1247702400000, 13.6, 19.6],
[1247788800000, 11.4, 22.6],
[1247875200000, 13.2, 25.0],
[1247961600000, 14.2, 21.6],
[1248048000000, 13.1, 17.1],
[1248134400000, 12.2, 15.5],
[1248220800000, 12.0, 20.8],
[1248307200000, 12.0, 17.1],
[1248393600000, 12.7, 18.3],
[1248480000000, 12.4, 19.4],
[1248566400000, 12.6, 19.9],
[1248652800000, 11.9, 20.2],
[1248739200000, 11.0, 19.3],
[1248825600000, 10.8, 17.8],
[1248912000000, 11.8, 18.5],
[1248998400000, 10.8, 16.1]
];
    $('#container').highcharts('StockChart', {
            chart: {
            },
             xAxis: {
                    type: 'datetime'
                },

            series : [{
                data : data,
                turboThreshold: 100000,
                pointStart: Date.UTC(2013, 10, 28),
                pointInterval: 60 * 1000,
                tooltip: {
                    valueDecimals: 1,
                    valueSuffix: '°C'
                },
                datagrouping:{
                    enabled: false
                }

            }]

        });
});

（它带有范围数据，但在这种情况下并不重要......）如果您每个月都有相同数量的点，那么轴看起来很完美！如果您现在从 pe June 中删除一些点，则该图被“推到一起”，因此您在 xaxis 上的所有单位都没有相同的单位……我需要图表来显示这个差距……

非常感谢你的帮助！

干杯J！:)

于 2013-11-13T09:49:50.763 回答
0

当两点之间的时间比平时长时，要让图表“切割”曲线，您可以在绘图选项中添加gapSize选项。

每当 x 轴上两点之间的空间长于整个系列中 x 轴上两点之间较小空间的两倍时，此示例将切割曲线。

plotOptions: {
    line: {
        gapSize: 2
    }
}

JsFiddle 示例

于 2013-11-14T15:26:16.433 回答