田中ブログ

さいたまに住んでいるアラサーの男です。仕事はSESでプログラムを書いてることが多いです。聖地巡礼、日々の生活、たまに技術的なことを書いていこうと思います。

Chart.jsの小ネタ

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

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

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

 

 

最初にはまったこと

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

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

 

ネタ1 ツールチップ(tooltip)を固定で表示する。

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

chart.js 2.1.6 - JSFiddle

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

ネタ2 固定表示しているツールチップ(tooltip)の一部を非表示

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

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

ネタ3 ツールチップを中央揃えで表示する

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

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

 

ネタ4 ツールチップのキャレット(吹き出し)を消す

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

 

ネタ5 ツールチップのx軸に対するボックスを消す

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

 

ネタ6 ツールチップの表示内容を加工する

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

http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

 

ネタ7 ツールチップの位置を変更する。

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

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

javascript - Move tooltip further from data point for Chart.js? - Stack Overflow

 

以上です。