Chart.jsの小ネタ - 田中ブログ

今回はChart.jsの小ネタについて書こうと思います。

普通に使う方法は検索するとすぐに見つかるので、ネットで調べてみて日本語のページがぱっと見つからなかったりしたものを紹介します。

（テキストやリンクを貼るレベルですが。）

ネットを見てるとソースコードがよく乗っているのですが、自分の使用しているChart.jsのバージョンと異なるバージョンのものということが結構ありました。

自分は2.1とかあたりのバージョンを使用していたのですが、1.X(詳細忘れた)とかのソースコードをコピペして使ったら普通に動きませんでした。なので、自分のバージョンと合ったものを探していきました。

以下のページのソースコードをコピペしてできました。

Chart.pluginService.registerとafterDrawを記述して、Chartを作成するときにshowAllTooltipsを指定するといった感じです。

例えばグラフの値が0の時にはツールチップを出しくないといったようなとき。

ネタ1のafterDrawの関数の中で、Chart.helpers.eachとしているところでif文をかませるような感じでできました。eachの中でtooltipをたどっていけば、表示対象のtooltipの値を取得できたので、それを条件に使用しました。

ツールチップを表示するとき、一番左側と一番右側のツールチップのキャレット部分の向きが他のツールチップと揃わないということがありました。

これは、Chartを作成するときのオプションで、tooltipのXAlignプロパティにcenterを指定することで対応できました。tooltipのオプションはいろいろあるようです。

これもChartを作成するときのオプションで、tooltipのcareteSizeを0とすることで消すことができました。

これもChartを作成するときのオプションで、tooltipのDisplayColorsをfalseとすることで消すことができました。

これもChartを作成するときのオプション。tooltipにcallbackのプロパティがあるのですがそこに記述します。labelやtitleに対して、関数を書いてあげることでその関数の戻り値が表示内容となります。ちなみに、ただの「return」とするとその項目が非表示になりました。

ツールチップをちょっと上にずらしたい、左にずらしたいということができます。

Chart.Tooltip.positioners.customにpositionを返却する関数を描いて、これもChartを作成するときのオプションにて、tooltipのpositionに'custom'を指定します。

以上です。