Question

我每分钟都有一些数据。但是其中存在不规则的差距。我正在使用具有“折线”图表类型的股票图表（v6.0.5），而我的xAxis是“ datetime”。我希望这些间隙不会将xAxis切成碎片，而应像http://jsfiddle.net/VwkHu/177/中那样反映经过的时间。我真的不想在数据集中填写Null值，因为差距可能很大。如何通过股票图表获得这种行为？

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

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

然后间隙不反映数据中实际间隙的大小，而是恒定或等于间隙大小。

Answer 1

使用高库存，您需要设置ordinal: false以便在图表中保留缺失时间。

在纵轴上，无论图表中的实际时间或它们之间的x距离，这些点在图表中的间距均相等。这意味着晚上或周末丢失的数据不会占用图表中的空间。

赞：

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/

HighStock不能以相同的方式使用gapsize

1 个答案: