即使我已将 split 设置为 true，为什么悬停时只显示一个标签？

Question

这是我的小提琴与我希望我的图表操作如下的小提琴：

• 所需：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/tooltip/split/
• 我的： https://jsfiddle.net/ryannaumanx/o1rgdfys/

Highcharts.chart('container', {
    "accessibility": {
        "enabled": false
    },
    "credits": {
        "enabled": false
    },
    "title": {
        "text": "fruits",
        "margin": 50,
    },
    "tooltip": {
        "split": true,
        "outside": true
    },
    "boost": {
        "useGPUTranslations": false,
        "seriesThreshold": 1,
        "enabled": true
    },
    "chart": {
        "spacingRight": 15,
        "spacingLeft": 5,
        "marginTop": 60,
        "width": 200,
        "zooming": {
            "mouseWheel": {
                "enabled": true
            },
            "type": "y"
        },
        "marginBottom": 100,
        "events": {}
    },
    "legend": {
        "width": 200,
        "maxHeight": 100,
        "x": 15,
    },
    "xAxis": {
        "minorTicks": true,
        "crosshair": {
            "snap": false
        },
        "maxPadding": 0,
        "minPadding": 0,
        "title": {
            "offset": 7,
            "style": {
                "fontSize": "11px"
            }
        },
        "labels": {
            "y": -7,
        },
        "tickLength": 0,
        "endOnTick": true,
        "lineWidth": 0,
        "startOnTick": true,
        "tickAmount": 2,
        "minorTickInterval": "auto",
        "tickPositions": [
            0,
            150
        ],
        "min": 0,
        "max": 150,
        "reversed": false,
        "opposite": true,
        "gridLineWidth": 0,
        "minRange": 0.1,
        "type": "linear"
    },
    "yAxis": {
        "min": 1067.62296,
        "max": 1097.18856,
        "minorTicks": true,
        "reversed": true,
        "crosshair": {
            "snap": false
        },
        "title": {
            "text": null
        },
        "maxPadding": 0,
        "minPadding": 0,
        "events": {},
        "labels": {
            "padding": 0,
            "rotation": -90,
            "format": "{value}",
        },
        "plotLines": []
    },
    "annotations": [],
    "exporting": {
        "enabled": false
    },
    "plotOptions": {
        "series": {
            "cursor": "pointer",
            "connectNulls": false,
            "findNearestPointBy": "xy",
            "pointStart": null,
            "allowPointSelect": true,
            "stickyTracking": false,
            "turboThreshold": 0,
            "events": {},
            "point": {
                "events": {}
            }
        }
    },
    "series": [
        {
            "id": "apples",
            "cropThreshold": 999999999,
            "data": [
                [
                    139.1992,
                    1067.62296
                ],
                [
                    103.4107,
                    1081.85712
                ],
                [
                    93.0917,
                    1097.18856
                ]
            ],
            "name": "apples",
            "lineWidth": 0.5,
            "visible": true,
            "allowPointSelect": true
        },
        {
            "id": "oranges",
            "cropThreshold": 999999999,
            "data": [
                [
                    103.4093,
                    1067.62296
                ],
                [
                    134.8164,
                    1082.71056
                ],
                [
                    48.788,
                    1097.18856
                ]
            ],
            "name": "oranges",
            "lineWidth": 0.5,
            "visible": true,
            "allowPointSelect": true
        },
        {
            "id": "grapes",
            "cropThreshold": 999999999,
            "data": [
                [
                    105.3344,
                    1067.62296
                ],
                [
                    103.497,
                    1079.96736
                ],
                [
                    98.965,
                    1097.18856
                ]
            ],
            "name": "grapes",
            "lineWidth": 0.5,
            "visible": true,
            "allowPointSelect": true
        }
    ]
});

Answer 1

分割工具提示仅适用于具有相同

x

值的点。

我假设您想显示具有相同索引的所有点的工具提示。为此，您可以添加下面的简单插件：

(function(H) {
  H.wrap(H.Pointer.prototype, 'getHoverData', function(proceed) {
    const result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    const hoverPoint = result.hoverPoint;

    if (hoverPoint) {
      const allSeries = hoverPoint.series.chart.series;

      allSeries.forEach(s => {
        const point = s.points[hoverPoint.index];

        if (point && point !== hoverPoint) {
          result.hoverPoints.push(point);
        }
      });
    }

    return result;
  });
}(Highcharts));

---

现场演示：https://jsfiddle.net/BlackLabel/9vw26mLy/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts