在柱状图中使用最近邻域搜索悬停

Question

在Highcharts线型图中，如果你将鼠标悬停在图表中的任何位置，它将在最近的数据点上显示一个工具提示，使用最近邻搜索(JSFiddle).

chart: {
    type: 'line'
},

但在柱状图或条形图中，只有在悬停列本身时才会显示工具提示。如果你把鼠标悬停在上面，它就不会显示工具提示 (JSFiddle).

chart: {
    type: 'column'
},

我想在列图中得到同样的最近邻搜索行为。这可能吗？

我发现 plotOptions.column.findNearestPointBy 选项，其中写道。

只适用于使用最近邻搜索（而不是直接悬停）作为工具提示的系列类型。

但我不知道如何启用最近邻搜索。

Answer 1

Highcharts系列像列需要直接悬停来应用工具提示。它是由硬编码定义的 directTouch 属性。https:/github.comhighchartshighchartsblobmastertspartsColumnSeries.ts#L564。

作为解决方案，你可以使用共享工具提示。https:/jsfiddle.netBlackLabelpyja037s。

或者添加一个允许所需行为的插件，例如。

(function(H) {
    H.seriesTypes.column.prototype.directTouch = false;

    H.wrap(H.Pointer.prototype, 'getHoverData', function(
        proceed, 
        existingHoverPoint, 
        existingHoverSeries, 
        series, 
        isDirectTouch, 
        shared, 
        e
    ) {

        var chart = this.chart,
            hoverData = proceed.apply(this, Array.prototype.slice.call(arguments, 1)),
            hoverPoint = hoverData.hoverPoint,
            pointX = hoverPoint && hoverPoint.x,
            pointIndex;

        this.chart.series.forEach(function(s) {
            pointIndex = s.xData.indexOf(pointX);
            if (pointIndex >= 0) {
                if (
                    s.points[pointIndex] !== hoverPoint &&
                    Math.abs(
                        s.points[pointIndex].shapeArgs.x + chart.plotLeft - e.chartX
                    ) < Math.abs(hoverPoint.shapeArgs.x + chart.plotLeft - e.chartX)
                ) {
                    hoverPoint = s.points[pointIndex];
                    hoverData.hoverPoint = hoverPoint;
                    hoverData.hoverSeries = s;
                    hoverData.hoverPoints = [hoverPoint];
                }
            }
        });

        return hoverData;
    });
}(Highcharts));

---

现场演示。 https:/jsfiddle.netBlackLabel4bw1no9h。

API参考。

https:/api.Highcharts.comhighchartsseries.column.stickyTracking。

https:/api.highcharts.comhighchartstooltip.shared。

文件。 https:/www.highcharts.comdocsextending-highchartsextending-highcharts