N-takデザインブログ

WEBで培った作品や技術を公開しています。

細かいところまで解説がないのでJavascript 初心者Chart.jsをまとめてみました。

実際に使ってみて細かいところで四苦八苦したので纏めてみました。

web上でのプレゼンや資料または、システム上の各種データ出力ができる折れ線グラフのjavascriptを紹介します。では順を追って説明していきます。

======用意するもの======

公式サイトは こちらになります。
公式からダウンロードしても良いです。
オープンソースで無料となっているようです。
今回使用する分は私がカスタマイズしています。

ダウンロードして使う場合はこちらからどうぞ

※DL修正しました。

DL中止しました(2013/11/26)

======chart.jsの設置======

 chart.jsを"head"タグ内にインクルードします。f:id:r4m0khksticiibypvp4k:20131001112316j:plain

 

======canvasの設置======

 canvasを"body"タグ内に記述します。f:id:r4m0khksticiibypvp4k:20131001112318j:plain

======line.jsの設置======

 scriptを"canvas"の下に記述します。
 f:id:r4m0khksticiibypvp4k:20131001112320j:plain

これだけで設置完了です。出来上がりを見てみましょう→サンプル

======中身のデータを替えてみよう======

 パラメータを変更することでグラフのデータを書き換えることができます。

======オプションパラメータでビジュアルの変更======

 f:id:r4m0khksticiibypvp4k:20131001112312j:plain

次はオプションについて説明していきます。パラメータを変更することでビジュアルやアニメーションを変更することができます。ただしCSSではなく、JSでCSSを上書きしていくような仕様になっています。

//スケールの表示
scaleOverlay : false,

//スケールの上書き
scaleOverride : false,
//** scaleOverrideがtrueの場合 **
//コーディングされたスケールのステップ数
scaleSteps : null,
//値ジャンプ
scaleStepWidth : null,
//開始値
scaleStartValue : null,

//スケールラインの色
scaleLineColor : "rgba(0,0,0,.1)",//ライン色
scaleLineWidth : 1,//ピクセル幅

//ラベル表示の有無
scaleShowLabels : true,
//js文字列補間
scaleLabel : "<%=value%>",

//スケールラベルのフォント
scaleFontFamily : "'Arial'",//フォント

scaleFontSize : 12,//サイズ 

scaleFontStyle : "normal",//スタイル
scaleFontColor : "#666",//フォント色


//グリッド線
scaleShowGridLines : true,//表示有無
scaleGridLineColor : "rgba(0,0,0,.2)",//線色
scaleGridLineWidth : 1, //線幅

//ラインのベジェ曲線
bezierCurve : false,

//各ポイントのドット表示
pointDot : true,
pointDotRadius : 3,//半径
pointDotStrokeWidth : 1,//ピクセル値



//データセットのためスロトーク表示
datasetStroke : true,
datasetStrokeWidth : 2,//ピクセル幅

//線の内側の色埋の有無
datasetFill : true,

//アニメーションの有無
animation : true,
animationSteps : 60,//アニメーションスピード(値が少ないほど早くなる)
animationEasing : "linear",//アニメーションの効果
onAnimationComplete : null,//アニメーションの完了した時


//スケールオプション
scaleOverride : true, 
scaleSteps : 10, //目盛の数
scaleStepWidth : 10, //目盛間隔
scaleStartValue : 0, //目盛の最小値

 

他のドーナツやチャートも同様です。
※パラメータは個々に違うので注意! 
いかがだったでしょうか?質問等あればtwitter等で受け付けます。以上解説でした。

======補足======

任意のIDを変更した場合は、JSの中のvar myLine・・・の中にあるgetElementByIdの("ここ")を同じように変更してください