具有多个轴的Highcharts时间线图

Question

[我正在尝试用两个Highcharts实现一个timeline xAxis图表-一种类型为timeline，另一种类型为datetime显示相同的数据。我设法做到了，但是我在dataLabels上的timeline xAxis位置上遇到了麻烦。

1. 我不希望标签交替显示，所以我使用了alternate: false，但我希望它们显示在xAxis的顶部，而不是在下面-这显然是alternate: false的默认行为。
2. 我希望将两个xAxis链接在一起-当用户将鼠标悬停在xAxis之一上的一个点上时，该点应在两个轴上突出显示。
3. 是否可以在timeline轴上放大框的高度并在框内显示dataLabels？

下面您可以看到当前版本的屏幕截图和jsFiddle实时演示：

实时演示：-https://jsfiddle.net/wyek8t09/

Answer 1

1. 将distance属性设置为某个负值

---

series: [{
  dataLabels: {
    alternate: false,
    distance: -90
  },
  ...
}, ...]

2. 更改state属性中的外观。使用mouseOver和mouseOut事件连接点，并使用setState方法更改其状态。

---

plotOptions: {
  series: {
    states: {
      inactive: {
        opacity: 1
      }
    },
    marker: {
      states: {
        hover: {
          fillColor: 'red'
        }
      }
    },
    point: {
      events: {
        mouseOver: function() {
          var secondSeriesI = this.series.index ? 0 : 1,
            secondSeries = this.series.chart.series[secondSeriesI];

          secondSeries.points[this.index].setState('hover');
        },
        mouseOut: function() {
          var secondSeriesI = this.series.index ? 0 : 1,
            secondSeries = this.series.chart.series[secondSeriesI];

          secondSeries.points[this.index].setState('');
        }
      }
    }
  }
}

3. 增加marker.height属性中的值：

---

series: [{
  dataLabels: {
    alternate: false,
    distance: 0,
    marker: {
      height: 150
    }
  },
  ...
}, ...]

---

实时演示： https://jsfiddle.net/BlackLabel/g2zn1p63/

API参考：

https://api.highcharts.com/highcharts/series.timeline.marker

https://api.highcharts.com/highcharts/series.timeline.marker.states.hover

https://api.highcharts.com/highcharts/series.timeline.states.inactive

https://api.highcharts.com/class-reference/Highcharts.Point#setState

https://api.highcharts.com/highcharts/series.timeline.dataLabels.distance