Необходимо добавить отдельную подсказку для маркера точки.
Я использую перекрестие для отображения всплывающей подсказки в Highcharts. Также для некоторых точек данных серии я добавляю маркер (в желтом кружке). Я хочу знать, возможно ли иметь настраиваемую всплывающую подсказку при наведении конкретно на точке маркера, но я также хотел бы сохранить нормальное поведение всплывающей подсказки с перекрестием в той же точке (т. Е. При наведении курсора за пределы области желтого маркера для тех же данных точка, всплывающая подсказка должна учитывать форматер всплывающей подсказки и при наведении курсора точно на подсказку маркера должен отображаться другой текст, связанный с маркером). Возможно ли достичь?
[Мое намерение состоит в том, чтобы создать перемещаемый маркер аннотации, но в то же время сохранить поведение всплывающей подсказки по умолчанию для той же точки]
Пожалуйста, смотрите изображения ниже, чтобы получить представление об ожидаемом поведении. Пожалуйста, игнорируйте данные серии, так как они генерируются динамически и отличаются при каждом обновлении страницы. Чего я хочу добиться, так это иметь всплывающую подсказку с перекрестием для точки данных '05 -Jan-2019 ', а также отображать другую выглядящую или настраиваемую подсказку, когда пользователь специально наводит курсор на желтый маркер для той же точки данных.
Любые предложения, касающиеся альтернативных способов достижения этого, также приветствуются.
Вот как я добавляю маркер в данные моей серии:
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;
}
