Javascript Highcharts多轴时间线图

我正在尝试实现一个包含两个

xAxis

的

Highcharts

时间线

图表，一个是

时间线

类型，另一个是

日期时间

类型，显示相同的数据。我成功地做到了这一点，但是我在

时间轴xAxis上的
数据标签的位置上遇到了问题

我不希望标签是交替的，所以我使用了
alternate:false
，但我希望它们显示在
xAxis
的顶部，而不是下方-这显然是
alternate:false
的默认行为
我希望将两个
xAxis
链接起来-当用户将鼠标悬停在
xAxis
之一上的某个点上时，该点应在两个轴上高亮显示
是否可以放大
时间轴
中方框的高度，并在方框内显示
数据标签
以下是当前版本的屏幕截图和
jsFiddle
live演示：


现场演示：-

将
distance
属性设置为某个负值

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

增加标记高度中的值
属性：


现场演示：

API参考：





感谢您提供了详细的答案和参考资料！这正是我想要的。你知道如何在这个演示中消除第二个轴底部的空白吗？我希望两个xAxis直接位于彼此下方，整个图表高度刚好适合内容。您好@Stefan Stefanov，您可以使用
chart.height
和
yAxis
位置。例子：
series: [{
  dataLabels: {
    alternate: false,
    distance: -90
  },
  ...
}, ...]

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('');
        }
      }
    }
  }
}

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