javascript - 如何在 Highcharts 中用虚线连接空值

Question

我想在图表中用虚线连接空值。下面是我的代码所在的 JS fiddle 的 url -

data:  [
        [Date.UTC(2016, 1, 1),null], 
        [Date.UTC(2016, 2, 1),null], 
        [Date.UTC(2016, 3, 1),500], 
        [Date.UTC(2016, 4, 1),600], 
        [Date.UTC(2016, 5, 1),null], 
        [Date.UTC(2016, 6, 1),700], 
        [Date.UTC(2016, 7, 1),null], 
        [Date.UTC(2016, 8, 1),null], 
        [Date.UTC(2016, 9, 1),null],
        [Date.UTC(2016, 10, 1),null],
        [Date.UTC(2016, 11, 1),null], 
        [Date.UTC(2017, 0, 1),500]
        ],

http://jsfiddle.net/Ashish_developer/ue0wb8w0/

Answer 1

您可以使用 series.zones定义图形的哪一部分将被虚线。

根据您的数据，构建区域数组的算法可能是这样的(您可以随意调整它到您想要的方式):

function buildZones(data) {
  var zones = [],
      i = -1, len = data.length, current, previous, dashStyle, value;

  while (data[++i] === null);
  zones.push({
    value: i
  });

  while (++i < len) {
    previous = data[i - 1];
    current = data[i];
    dashStyle = '';

    if (previous !== null && current === null) {
      dashStyle = 'solid';
      value = i - 1;
    } else if (previous === null && current !== null) {
      dashStyle = 'dot';
      value = i;
    }

    if (dashStyle) {
      zones.push({
        dashStyle: dashStyle,
        value: value
      });
    }
  }

  return zones;
}

系列配置:

series: [{
  zones: buildZones(data),
  zoneAxis: 'x',
  data: data,
  connectNulls: true
}]

示例:http://jsfiddle.net/asf52ft8/