【Googleチャート】ツールチップのフォーマットを書き換える

goto_jp 137views 更新:2017年1月24日

サンプルは以下。

See the Pen Google Chat Custom Tooltip 1 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

同じデータのグラフですが、下のものはマウスオンしたときのツールチップに「個」と書き加えています。

グラフ描画の直前に下記コードでフォーマットを書き換えています。

  var formatter = new google.visualization.NumberFormat({ //フォーマット変更関数の呼び出し
    pattern: '#,###個' //フォーマットの指定
  });
  formatter.format(data, 1); //書き換える対象データの指定

上記2行目のフォーマット指定のこの箇所ですが、このように簡単に書き換えることもできます。

pattern: '#個'

しかし意図的に「#,###」とカンマ切りを指定しないと、カンマ切りが無くなってしまうので、データが3桁以内に収まるデータならば使える書き方です。

また下記のように%表示を指定すると自動で100倍してくれます。文字を書き換えるだけでなく、ちゃんとフォーマットを変更してくれています。

pattern: '#.#%'

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません