Jquery 悬停标记右侧的highchart背景

要制作如下图表：

我做了几乎所有的函数，但我不能解决右侧白色不透明区域

链接的图片中心的位置

---

我认为这是关于X轴绘图带的。

我会使用分区来实现线系列某些范围的不透明度-阅读以获得可用选项

加载事件时，可以附加为图表容器添加鼠标移动事件的函数。在鼠标事件中，我获取悬停点并更新它们的系列区域

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);