Entries

(Chart.js) 横軸ラベル("labels"の値)を変更する

備忘録です。
Chart.jsの勉強の為に、環境を落としてフォルダ"samples"にある
htmlファイルを見ていたのですが、サンプルプログラムのように
いつも同じ値のグラフを表示させることなんて事は有り得ないので
JavaScriptから値のコントロールができるか試してみました。

グラフ内の狙った場所を変更する方法は、フォルダ"docs"の下
にあるドキュメントに書かれていましたのですぐに実現できたのですが、
横軸ラベルの文字列の変更については書かれていませんでした
ので調べてみました。
調査に当たっては、Chart.jsの環境の"samples"にある"line.html"
を使いました。

まず、ソース内で横軸ラベルの文字列はこのように宣言されています。

labels : ["January","February","March","April","May","June","July"],

そしてインスタンス作成。

window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});

ではここから本題です。

how to update labels? #593
https://github.com/nnnick/Chart.js/issues/593
の記事によると、例えば
3つめの"March"を"3月"に変えたい場合は

window.myLine.scale.xLabels = ["January","February","3月","April","May","June","July"];

みたいな書き方をするみたいだけど、ちょっとかったるい。

狙った場所だけを変えたい場合は、

window.myLine.scale.xLabels[2] = "3月";

と書いたら動きましたので、こちらの書き方でよろしいのでは
ないでしょうか。

Chart.js 横軸ラベルの変更

JavaScriptを使ってグラフ内の狙った場所(値)を変更できることが確認
できましたので、この先にはjsonデータなどをグラフに反映させてその
都度表示を変化させるような処理の開発が待っているのかな、と思います。
(実際は同一生成元ポリシーの問題がありますので、jsonファイルの在処に
よってはサーバーサイドの作り込みになるわけで・・・そのあたりの話は
今回は割愛します。)
英語ですけど難しくないので、フォルダ"docs"の下にあるドキュメントは
必ず読む必要があります。読まないと、画面の再描画なんかを変な方法
で実現してしまう恐れがあります。

Chart.js
http://www.chartjs.org/


スポンサーサイト
この記事に対してトラックバックを送信する(FC2ブログユーザー)
http://tadpolizemedia.blog118.fc2.com/tb.php/249-3b7a0163

0件のトラックバック

0件のコメント

コメントの投稿

投稿フォーム
投稿した内容は管理者にだけ閲覧出来ます

Appendix

プロフィール

 二代目松四郎

Author: 二代目松四郎


「カメラと動画(+スチル写真)」
「音響と音楽」
「プログラミング」
を主なテーマに活動しています。
映画館と美術館と音楽ホールと
古い街並みが私の学校。

宮城県仙台市在住。

カテゴリー

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Counter