Chart.js で、線グラフを書いた時に、重なる点をToolTip 表示させる時
注意しないといけないオプションがある。
インタラクションモードと呼ばれている指定オプションで mode というのがある。
point マウスポインタと交差する点、棒グラフ、グラフ描画アイテムに合わせてToolTip表示
nearest マウスポインタに近い点、棒グラフ、グラフ描画アイテムに合わせてToolTip表示
var chart = new Chart(ctx, { type: 'line', data: data, options: { tooltips: { mode: 'point' } } });
デフォルトは、nearest でこれを使ってしまうと
2つの線グラフが交差するグラフでは、交点、及び重なる点で片方しか出てこない。
Chart.js で折れ線グラフの交点(intersect)をToolTip 表示(double値編) - Oboe吹きプログラマの黙示録
Chart.js で折れ線グラフの交点(intersect)をToolTip 表示(時刻編) - Oboe吹きプログラマの黙示録
この2つとも、このままでは、良くないのである。
tooltips: { mode: 'point' }
を書くようにして、
としないと不完全である。
また注意しなければならないのが、pointHitRadius を同じ値にすることだ。