Question

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

我正在使用十字准线在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;
}

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标记添加单独的注释样式工具提示？

1 个答案: