javascript - highcharts 中一张图表上的多个时间线

Question

我希望在 highcharts 中制作以下图表

https://drive.google.com/open?id=1eh9QTsiENZkQoipKkoYglNN_IJFqlkez

最好的方法是什么？

• 我应该使用时间线图表 API 的一些变体（https://www.highcharts.com/docs/chart-and-series-types/timeline），还是
• 我应该使用带有水平线的散点图的一些变体吗？（https://www.highcharts.com/docs/chart-and-series-types/scatter-chart）

任何指导和代码示例将不胜感激

非常感谢

标签： javascripthighcharts

Answer 1

您应该尝试使用带有水平线的散点图的变体。检查下面发布的演示和代码。

代码：

function generateLineData(year) {
  return [
    [+new Date('01-01-2019'), year],
    [+new Date('04-01-2019'), year],
    [+new Date('07-01-2019'), year],
    [+new Date('10-01-2019'), year]
  ]
}

function generateScatterData(year) {
  return [
    [+new Date('01-10-2019'), year],
    [+new Date('01-27-2019'), year],
    [+new Date('03-08-2019'), year],
    [+new Date('04-13-2019'), year],
    [+new Date('04-13-2019'), year],
    [+new Date('07-22-2019'), year],
    [+new Date('08-03-2019'), year],
    [+new Date('09-23-2019'), year]
  ]
}

Highcharts.chart('container', {
  credits: {
    enabled: false
  },
  yAxis: {
    title: {
      text: ''
    },
    gridLineWidth: 0,
    labels: {
      formatter: function() {
        const values = [2017, 2018, 2019]

        if (values.includes(this.value)) {
          return this.value;
        }

        return '';
      }
    }
  },
  xAxis: {
    type: 'datetime',
    labels: {
    	formatter: function () {
        return Highcharts.dateFormat('%b', this.value);
      }
    }
  },
  time: {
    useUTC: false
  },
  plotOptions: {
    line: {
    	enableMouseTracking: false,
      marker: {
        enabled: false
      },
      color: '#bbb',
      lineWidth: 3
    },
    scatter: {
      colorByPoint: true,
      marker: {
        symbol: 'circle',
        radius: 7,
        lineWidth: 2
      }
    }
  },
  series: [{
    id: 'main',
    name: 'line series',
    data: generateLineData(2017)
  }, {
    linkedTo: 'main',
    data: generateLineData(2018)
  }, {
    linkedTo: 'main',
    data: generateLineData(2019)
  }, {
    linkedTo: 'main',
    type: 'scatter',
    data: generateScatterData(2017)
  }, {
    linkedTo: 'main',
    type: 'scatter',
    data: generateScatterData(2018)
  }, {
    linkedTo: 'main',
    type: 'scatter',
    data: generateScatterData(2019)
  }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

演示：

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