Highcharts 6时间线图

Question

（Highcharts版本6）

除了本示例中的数据点之外，还可以有一个时间线外观图表：

https://jsfiddle.net/s1eL30Lh/97/

<script src="https://code.highcharts.com/stock/highstock.js"></script>

但不使用highstock，而是仅使用highcharts？

我知道可以使用xrange模块，但是不太一样：

https://jsfiddle.net/deep3015/q18yvy75/

如果范围足够长，可以模拟一条线，那么您将无法在该行的顶部添加“数据点”，并且如果将范围缩小到看起来像数据点的程度，那么您将没有一条线。

NOTE我知道版本7中有新的图表类型“时间轴”，但我需要使用版本6.1

Answer 1

是的，有可能。但是，不能使用flags系列，因为Highstock仅支持该系列。检查下面的演示和代码。

代码：

function toMs(yeah, month) {
  return Date.UTC(yeah, month, 1);
}

var series = [{
    // First series
    name: 'Running',
    color: 'green',
    id: 'green',
    dataRaw: [{
      y: 1,
      xRanges: [
        // first value: from; second value: to
        [toMs(2000, 1), toMs(2002, 8)],
        [toMs(2006, 10), toMs(2006, 11)]
      ]
    }]
  }, {
    // Second series
    name: 'Filed',
    color: 'yellow',
    id: 'yellow',
    dataRaw: [{
      y: 1,
      xRanges: [
        // first value: from; second value: to
        [toMs(2002, 8), toMs(2006, 10)]
      ]
    }]
  },
  {
    // Second series
    name: 'Granted',
    color: 'blue',
    id: 'blue',
    dataRaw: [{
      y: 1,
      xRanges: [
        // first value: from; second value: to
        [toMs(2006, 11), toMs(2021, 8)]
      ]
    }]
  }

].map(function(series) {
  series.data = [];
  series.dataRaw.forEach(function(dataRaw) {
    dataRaw.xRanges.forEach(function(xRange) {
      series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line
    }); // forEach
  }); // forEach
  return series;
});

console.log(series);

var chart = Highcharts.chart('container', {
  chart: {
    type: 'scatter'
  },
  title: {
    text: 'Example'
  },
  plotOptions: {
    scatter: {
      lineWidth: 5,
      marker: {
        enabled: true,
        symbol: 'circle',
        fillColor: '#FFFFFF',
        lineWidth: 2,
        lineColor: null,
        radius: 5
      },
      dataLabels: {
        enabled: true,
        align: 'right',
        rotation: -30,
        x: -2,
        y: 15,
        formatter: function() {
          return Highcharts.dateFormat('%Y-%m', this.x);
        }
      },
      tooltip: {
        pointFormatter: function() {
          return Highcharts.dateFormat('%Y-%m', this.x);
        }
      }
    },
    flags: {
      lineWidth: 1
    }
  },
  xAxis: {
    title: {
      text: 'Time'
    },
    type: 'datetime',
    minTickInterval: 365 * 24 * 36e5,
    labels: {
      align: 'left'
    },
    plotBands: [{
      from: Date.UTC(2000, 10, 27),
      to: Date.UTC(2004, 11, 1),
      color: '#EFFFFF',
      label: {
        text: 'Office 1',
        style: {
          color: '#999999'
        },
        y: 30
      }
    }, {
      from: Date.UTC(2004, 11, 1),
      to: Date.UTC(2012, 9, 1),
      color: '#FFFFEF',
      label: {
        text: 'Office 2',
        style: {
          color: '#999999'
        },
        y: 30
      }
    }, {
      from: Date.UTC(2012, 9, 1),
      to: Date.UTC(2020, 10, 27),
      color: '#FFEFFF',
      label: {
        text: 'Office 3',
        style: {
          color: '#999999'
        },
        y: 30
      }
    }]
  },
  yAxis: {
    tickInterval: 1
  },
  series: series,
  annotations: [{
    labelOptions: {
      backgroundColor: 'rgba(255,255,255,0.5)'
    },
    labels: [{
      distance: 10,
      point: {
        xAxis: 0,
        yAxis: 0,
        x: toMs(2002, 8),
        y: 1
      },
      text: 'Filled Date'
    }]
  }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1/modules/annotations.js"></script>

<div id="container" style="height: 400px"></div>

Demo：

• https://jsfiddle.net/BlackLabel/6eahoxjv/