javascript - highchart xrange 中的重叠数据点不显示工具提示

Question

我有一个 xrange highchart，其中有一个系列，其中一些数据点具有重叠值。当鼠标指针悬停在特定数据点上时，我需要获取重叠数据点的值一次。我尝试使用系列 mouseover 事件，但从中我只能获得重叠数据点之一。下面是我的代码，

Highcharts.chart('container', {
      chart: {
        type: 'xrange',
        height: 100,
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: 'transparent'
      },
      plotOptions: {
        series: {
          point: {
            events: {

              mouseOver: (ev) => {
                console.log(ev);
              }
            }
          }
        }
      },
      credits: {
        enabled: false
      },
      title: {
        text: ''
      },
      tooltip: {
        shared: true
      },
      xAxis: {
        visible: true,
        tickLength: 0,
        lineWidth: 2,
        lineColor: '#eee',
        labels: {
          enabled: false
        },
        max: Date.UTC(2019, 6, 13)
      },
      yAxis: {
        visible: false
      },
      legend: {
        enabled: false
      },
      series: [{
        name: '',
        borderRadius: 0,
        pointPadding: 0,
        borderWidth: 4,
        groupPadding: 0,
        data: [{
          x: Date.UTC(2019, 3, 21),
          x2: Date.UTC(2019, 6, 2),
          y: 0,
          color: 'transparent',
          borderColor: 'rgba(230, 141, 11, 0.5)'
        }, {
          x: Date.UTC(2019, 5, 26),
          x2: Date.UTC(2019, 6, 5),
          y: 0,
          color: 'transparent',
          borderColor: 'rgba(228, 53, 70, 0.5)'
        }, {
          x: Date.UTC(2019, 5, 8),
          x2: Date.UTC(2019, 11, 10),
          y: 0,
          color: 'transparent',
          borderColor: 'rgba(40, 167, 69, 0.5)'
        }
        ],
        dataLabels: {
          enabled: false
        }
      }]

    });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>

<div id="container"></div>

jsfiddle version

我什至尝试了工具提示的 shared: true 选项，但没有用。是否有可能在 xrange 图表中实现这一点？提前致谢!

Answer 1

您可以启用 followPointer 选项，并在 positioner 函数中将光标坐标与点坐标进行比较，以在工具提示标签中显示所需的值:

tooltip: {
    followPointer: true,
    positioner: function(plotX, plotY, pos) {
        var points = this.chart.series[0].points,
            str = '';

        points.forEach(function(p) {
            if (
                p.shapeArgs.x <= pos.plotX &&
                p.shapeArgs.x + p.shapeArgs.width >= pos.plotX
            ) {
                str += '<span style="color:' + p.borderColor +
                    '">' + p.x + ' - ' + p.x2 + '</span><br>';
            }
        });

        this.label.attr({
            text: str
        });

        return this.getPosition(plotX, plotY, pos)
    }
}

现场演示: http://jsfiddle.net/BlackLabel/n6w1vLbd/

API 引用:

https://api.highcharts.com/highcharts/tooltip.positioner

https://api.highcharts.com/highcharts/tooltip.followPointer