勉強したことのメモ

webプログラマが勉強したことのメモ。

Chart.jsでグラフの描写

   

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用していたものの、ライセンスの問題で商用サイト可のものを使用したかった。Chart.jsが有名っぽいので使用方法をメモ。

 

サンプル

http://taitan916.info/sample/chart.js/

 

準備

以下JSファイルを読み込んでおく。

 

ソース

折れ線グラフ

 

棒グラフ

 

円グラフ

 

棒グラフ&折れ線グラフ

 

その他

各種グラフの色設定

グラフの色や背景色は本来であれば指定しなければならない。しかしながらそれは非常に面倒くさい上、データの種類が動的に変わる場合は設定するのが難しい。そのため自動で設定できる方法が無いか探したところプラグインを導入することで解決できた。

まず以下プラグインを読み込む。

そしてoptionに以下を追記する。

 

目盛りを0から開始する

デフォルトのままで棒グラフや折れ線グラフを表示させた場合、表示するデータの最小値=目盛りの最小値となり見栄えがよろしくない。optionに以下を追記することで解決した。

 

リファレンス

https://misc.0o0o.org/chartjs-doc-ja/

 

所感

特殊なことをしないのであればChart.jsで対応できそうに思われる。また日本語ドキュメントが用意されているのが助かる。

あとGoogle Chartsも気になるので試しておきたいところ。

 - JavaScript

  関連記事

IE&javascriptの予約語

前にもひっかかった問題で、今日同じことで 時間をとられたのでメモ。 予約語? っ ...

highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

やりたかった事は、 ・棒グラフと折れ線グラフを入れたい ・Y軸はそれぞれ違う値に ...

Flashを用いずJavaScriptでコピー&カット機能を実装する

以前メモったようなFlashを用いる方法ではなく、WebAPIでコピー& ...

3Dデータ(obj,stlファイル)をブラウザ上で表示する方法  

3Dデータをブラウザで表示させて、違う方向から見たり、縮小拡大をしたいという案件 ...

getElementsByTagName

うろ覚えだけど業務中に、 document.getElementById('aa ...

リンク部分にマウスオーバーでツールチップを表示(nicetitles.js)

既存のソースにて見たことの無いプラグインが 使われていたのでメモ。 ■参考 ht ...

JavaScriptのvarとletとconst

JavaScript関連の調べ物をしていた際、変数の宣言時にvarではなくlet ...

JavaScriptでinputタグのtypeを変更

チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

Ajaxでプラグイン無しのファイルアップロード

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...