ポイント マーカーに別のツールチップを追加する必要があります。
ハイチャートでツールチップを表示するために十字線を使用しています。また、シリーズ データ ポイントの一部については、マーカー (黄色の円) を追加しています。特にマーカー ポイントにホバリングする際にカスタム ツールチップを表示できるかどうかを知りたいのですが、同じポイント (つまり、同じデータの黄色のマーカー エリアの外にホバリングしている間) での通常のクロスヘア ツールチップの動作も維持したいと考えています。ポイント、ツールチップはツールチップフォーマッタを尊重し、マーカーツールチップに正確にカーソルを合わせると、マーカーに関連する別のテキストを表示する必要があります)。達成することは可能ですか?
[私の意図は、ホバー可能な注釈マーカーを作成することですが、同時に同じポイントのデフォルトのツールチップ動作を保持することです]
予想される動作については、以下の画像を参照してください。シリーズ データは動的に生成され、ページを更新するたびに異なるため、無視してください。私が達成したいのは、「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;
}

