0

ポイント マーカーに別のツールチップを追加する必要があります。

ハイチャートでツールチップを表示するために十字線を使用しています。また、シリーズ データ ポイントの一部については、マーカー (黄色の円) を追加しています。特にマーカー ポイントにホバリングする際にカスタム ツールチップを表示できるかどうかを知りたいのですが、同じポイント (つまり、同じデータの黄色のマーカー エリアの外にホバリングしている間) での通常のクロスヘア ツールチップの動作も維持したいと考えています。ポイント、ツールチップはツールチップフォーマッタを尊重し、マーカーツールチップに正確にカーソルを合わせると、マーカーに関連する別のテキストを表示する必要があります)。達成することは可能ですか?

[私の意図は、ホバー可能な注釈マーカーを作成することですが、同時に同じポイントのデフォルトのツールチップ動作を保持することです]

予想される動作については、以下の画像を参照してください。シリーズ データは動的に生成され、ページを更新するたびに異なるため、無視してください。私が達成したいのは、「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