高架背景右侧悬停标记

Question

想要制作这样的图表：

我几乎完成了功能，但我无法解决右侧白色不透明区域。

Here is a sample图片（链接中心）

我认为这是关于X Axis Plotband。

Answer 1

我会使用区域来实现某些系列范围的不透明度 - 请阅读API docs以获取可用选项。

在加载事件中，您可以附加为图表容器添加鼠标移动事件的功能。在鼠标事件中，我获得悬停点并更新其系列区域。

Highcharts.addEvent(this.renderTo, 'mousemove', e => {
        const points = this.hoverPoints && this.hoverPoints.length && this.hoverPoints.slice();
        const hoverPoint = this.hoverPoint;



        if (points && hoverPoint) {
          const makeColor = Highcharts.color;
          const pos = hoverPoint.x;

          points.forEach(point => {
            const x = point.x;
            const color = point.color;
            point.series.update({
              zones: [{
                value: x
              }, {
                color: makeColor(point.color).setOpacity(0.3).get()
              }]
            }, false)
          });

          this.redraw(false);

这样可以获得系列的正确不透明度，但是由于重绘和系列更新，您的工具提示会消失。需要调用tooltip.refresh()，但您还需要找到tooltip.refresh()

的参数的点数

 const ps = [];
          this.series.forEach(series => {
            ps.push(series.points.find(point => point.x === pos))
          });
          this.tooltip.refresh(ps, e);

如果您在绘图区域之外，您可以添加一些其他功能，例如重置区域。完整的例子就是小提琴。

示例和输出

https://jsfiddle.net/qyjxzepu/