如何为Highcharts标记添加单独的注释样式工具提示?
需要为点标记添加单独的工具提示 我使用十字线在图表中显示工具提示。另外,对于一些系列数据点,我添加了一个标记(在黄色圆圈中)。我想知道是否可能有一个自定义工具提示专门停留在标记点上,但我也想在同一点上保留正常的十字线工具提示行为(即,当鼠标悬停在同一数据点的黄色标记区域外时,工具提示应遵守工具提示格式设置程序,当鼠标悬停在标记上时,工具提示应显示与标记相关的不同文本)。是否可以实现 [我的目的是创建一个可悬停的注释标记,但同时保留同一点的默认工具提示行为] 请查看下面的图像以了解预期行为。请忽略序列数据,因为它们是动态生成的,并且在每次页面刷新时都不同。我想要实现的是为“2019年1月5日”数据点提供十字线工具提示,并且在用户悬停特定位置时显示不同的外观或自定义工具提示在同一数据点的“黄色”标记上对齐 任何与实现这一目标的其他途径有关的建议都是受欢迎的 以下是我在序列数据中添加标记的方式:如何为Highcharts标记添加单独的注释样式工具提示?,highcharts,react-highcharts,Highcharts,React Highcharts,需要为点标记添加单独的工具提示 我使用十字线在图表中显示工具提示。另外,对于一些系列数据点,我添加了一个标记(在黄色圆圈中)。我想知道是否可能有一个自定义工具提示专门停留在标记点上,但我也想在同一点上保留正常的十字线工具提示行为(即,当鼠标悬停在同一数据点的黄色标记区域外时,工具提示应遵守工具提示格式设置程序,当鼠标悬停在标记上时,工具提示应显示与标记相关的不同文本)。是否可以实现 [我的目的是创建一个可悬停的注释标记,但同时保留同一点的默认工具提示行为] 请查看下面的图像以了解预期行为。请忽略
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;
}
函数格式系列数据(所有系列、注释、类别){
对于(设i=0;i要获得想要的结果,您可以创建一个包含两个系列的图表-行
,禁用启用移动跟踪
和分散
,使用默认工具提示和鼠标事件控制十字线的显示:
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
}
}
});
现场演示:
API参考:
感谢您提出解决方案。听起来不错!我们将尝试并更新此解决方案。效果非常好。