HighStock 对 gapsize 的处理方式不同

HighStock doesn't work with gapsize the same way

我有一些每分钟采集的数据。但其中有不规则的缝隙。我正在使用 'line' 图表类型的股票图表 (v6.0.5),我的 xAxis 是 'datetime'。我希望间隙不会将 xAxis 切成碎片,而是反映 http://jsfiddle.net/VwkHu/177/ 中已经过去的时间。 我真的不想在我的数据集中填写 Null 值,因为差距可能很大。 我怎样才能通过 stockchart 获得这种行为?

顺便说一句: 如果我通过以下方式添加 StockChart 将上面提到的 fiddle 更改为股票图表

...
$('#container').highcharts('StockChart',{
...

那么差距并不反映数据中实际差距的大小,而是常数或等于差距大小。

使用 highstock,您需要设置 ordinal: false 以保留图表中的缺失时间。

In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart.

像这样:

xAxis: {
  ordinal: false,
  ...
},

$(function() {
  $('#container').highcharts('StockChart',{
    chart: {
      type: 'line'
    },
    title: {
      text: 'Snow depth at Vikjafjellet, Norway'
    },
    subtitle: {
      text: 'Irregular time data in Highcharts JS'
    },
    xAxis: {
      type: 'datetime',
      dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
      },
      title: {
        text: 'Date'
      },
      ordinal: false
    },
    yAxis: {
      title: {
        text: 'Snow depth (m)'
      },
      min: 0
    },
    tooltip: {
      headerFormat: '<b>{series.name}</b><br>',
      pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

    series: [{
      name: 'Winter 2007-2008',
      gapSize: 5,
      //connectNulls: true,
      // Define the data points. All series have a dummy year
      // of 1970/71 in order to be compared on the same x axis. Note
      // that in JavaScript, months start at 0 for January, 1 for February etc.
      data: [
        [Date.UTC(1970, 9, 27), 0],
        [Date.UTC(1970, 10, 10), 0.6],
        [Date.UTC(1970, 10, 18), 0.7],
        [Date.UTC(1970, 11, 2), 0.8],
        [Date.UTC(1970, 11, 9), 0.6],
        [Date.UTC(1970, 11, 16), 0.6],
        [Date.UTC(1970, 11, 28), 0.67],
        [Date.UTC(1971, 0, 1), 0.81],
        [Date.UTC(1971, 0, 8), 0.78],
        [Date.UTC(1971, 0, 10), 0.98],
        [Date.UTC(1971, 0, 27), 1.84],
        [Date.UTC(1971, 1, 10), 1.80],
        [Date.UTC(1971, 1, 18), 1.80],
        [Date.UTC(1971, 1, 24), 1.92],
        [Date.UTC(1971, 2, 4), 2.49],
        [Date.UTC(1971, 2, 11), 2.79],
        [Date.UTC(1971, 2, 15), 2.73],
        [Date.UTC(1971, 2, 25), 2.61],
        [Date.UTC(1971, 3, 2), 2.76],
        [Date.UTC(1971, 3, 6), 2.82],
        [Date.UTC(1971, 3, 13), 2.8],
        [Date.UTC(1971, 4, 3), 2.1],
        [Date.UTC(1971, 4, 26), 1.1],
        [Date.UTC(1971, 11, 9), 0.25],
        [Date.UTC(1971, 11, 12), 0]
      ]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

工作 JSFiddle 示例: http://jsfiddle.net/ewolden/VwkHu/183/