如何为 Highcharts 标记添加单独的注释样式工具提示？

Question

需要为点标记添加单独的工具提示。

我正在使用十字准线在 Highcharts 中显示工具提示。此外，对于一些系列数据点，我添加了一个标记（黄色圆圈）。我想知道是否可以有一个自定义工具提示专门悬停在标记点上，但我也想在同一点上保留正常的十字准线工具提示行为（即在黄色标记区域外悬停相同数据时点，工具提示应该尊重工具提示格式化程序，并且在准确悬停在标记工具提示上时应该显示与标记相关的不同文本）。有可能实现吗？

[我的意图是创建一个可悬停的注释标记，但同时保留相同点的默认工具提示行为]

请查看下图以了解预期行为。请忽略系列数据，因为它们是动态生成的，并且在每次页面刷新时都不同。我想要实现的是为“2019 年 1 月 5 日”数据点提供十字准线工具提示，并且当用户专门将鼠标悬停在同一数据点的 'yellow' 标记上时，还显示不同的外观或自定义工具提示。

也欢迎任何与实现此目标的替代方法相关的建议。

这是我在系列数据中添加标记的方法：

function formatSeriesData(allSeries, annotations, categories) {
    for (let i = 0; i <= allSeries.length; i++) {

        let serie = allSeries[i];
        if (serie && !serie['color']) {
            serie = {
                ...serie,
                color: defaultColors[i]
            }
            allSeries[i] = serie;
        }

        //add annotations - if present
        if (serie && annotations && annotations.length) {
            const applicableAnnotations = _.filter(annotations, {
                name: serie.name
            });
            const annotationDates = _.map(applicableAnnotations, 'date'); //get all annotation dates
            let modifiedDataArray = [];
            let dataArray = serie.data; //get all series data
            for (let j = 0; j < dataArray.length; j++) {
                let dateForValue = categories[j]; //get the date corresponding to the value
                let annotation = _.find(applicableAnnotations, {
                    date: dateForValue
                });; //pick the annotation object
                let ptObj = {
                    dimension: "",
                    y: dataArray[j]
                };
                if (annotation && annotation.annotation) {
                    ptObj["marker"] = {
                        enabled: true,
                        radius: 6,
                        fillColor: '#FDBE2C',
                        symbol: 'circle'
                    };
                }
                modifiedDataArray.push(ptObj);
            }
            serie = {
                ...serie,
                data: modifiedDataArray
            }
            allSeries[i] = serie;
        }
    }
    console.log("allSeries ", allSeries);
    return allSeries;
}

Answer 1

为了获得想要的结果，您可以创建一个包含两个系列的图表 - line 禁用 enableMouseTracking 和 scatter 使用默认工具提示和鼠标事件来控制十字准线的显示：

Highcharts.chart('container', {
    series: [{
        data: [1, 2, 3, 4],
        enableMouseTracking: false
    }, {
        color: 'yellow',
        events: {
            mouseOver: function() {
                this.xAxis.update({
                    crosshair: {
                        width: 0,
                        label: {
                            enabled: false
                        }
                    }
                });
            },
            mouseOut: function() {
                this.xAxis.update({
                    crosshair: {
                        width: 1,
                        label: {
                            enabled: true
                        }
                    }
                });
            }
        },
        marker: {
            radius: 8,
            symbol: 'circle'
        },
        stickyTracking: false,
        data: [{
            x: 2,
            y: 3
        }]
    }],
    xAxis: {
        crosshair: {
            label: {
                enabled: true
            },
            snap: false
        }
    }
});

现场演示：http://jsfiddle.net/BlackLabel/k83u0spd/

API参考：

https://api.highcharts.com/class-reference/Highcharts.Axis#update

https://api.highcharts.com/highcharts/series.line.enableMouseTracking

https://api.highcharts.com/highcharts/series.line.stickyTracking

如何为 Highcharts 标记添加单独的注释样式工具提示？

How to add separate annotation style tooltip for Highcharts marker?

highcharts

react-highcharts