0

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

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

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

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

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

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

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

在此处输入图像描述

在此处输入图像描述

4

1 回答 1

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

于 2019-01-15T14:07:30.823 回答