title: 手軽に使えるChart.jsの基礎知識 author: Tomoyuki Konda
<script type="text/javascript" src="./lib/syntaxhighlighter_2.1.382/scripts/shCore.js"></script> <script type="text/javascript" src="./lib/syntaxhighlighter_2.1.382/scripts/shBrushXml.js"></script> <script type="text/javascript" src="./lib/syntaxhighlighter_2.1.382/scripts/shBrushJScript.js"></script> <script type="text/javascript"> SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.config.clipboardSwf = './lib/syntaxhighlighter_2.1.382/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>* ### 特徴 * #### HTML5のCanvas要素を使用 * #### 色や線に関する設定が豊富 * #### 6種類のグラフを描画する事ができる * #### MITライセンス 折れ線グラフ 棒グラフ レーダーチャート 鶏頭図 パイチャート ドーナツチャート
<script type="text/javascript" src="./lib/Chart.js" />
<canvas id="chart_area" />
var context = $("#chart_area").get(0).getContext("2d");
// 折れ線グラフ・レーダーチャート var data = { datasets:[ { // X軸とグラフ間の色 fillColor:"red", // 線の色 strokeColor: "blue", // グラフ上の点の色 PointColor: "green", // 点の縁色 pointStrokeColor: "black", // 表示する値 data:[20, 40, 30, 10, 50] } ], // X軸上のラベル labels:["A", "B", "C", "D", "E"] };
// 棒グラフ var data = { datasets:[ { // X軸とグラフ間の色 fillColor:"red", // 線の色 strokeColor: "blue", // 表示する値 data:[20, 40, 30, 10, 50] } ], // X軸上のラベル labels:["A", "B", "C", "D", "E"] };
// パイチャート・ドーナツチャート・鶏頭図 var data = [ // 表示する値、塗りつぶしの色 { value: 20, color: "rgba(255, 30, 30, 0.7)" }, { value: 40, color: "rgba(255, 255, 30, 0.7)" }, { value: 30, color: "rgba(30, 255, 30, 0.7)" }, { value: 10, color: "rgba(30, 255, 255, 0.7)" }, { value: 50, color: "rgba(30, 30, 255, 0.7)" } ];
* ### グラフの種類毎に設定できる項目が決まっている * #### 折れ線グラフ - 27個 * #### 棒グラフ - 27個 * #### ドーナツチャート - 10個 * #### パイチャート - 9個 * #### 鶏頭図 - 27個 * #### レーダーチャート - 35個 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript" src="lib/Chart.js"></script> <script type="text/javascript" src="scripts/line_options.js"></script> <script type="text/javascript" src="scripts/demo.js"></script>
// X軸、Y軸の太さ scaleLineWidth : 8, // X軸、Y軸線の色 scaleLineColor : "rgba(255,0,0,1)", // Y軸の範囲のマニュアル設定有効無効 scaleOverride : true, //======================================== // scaleOverrideがtrueの場合のみ有効 //======================================== // Y軸に表示する目盛数 scaleSteps : 5, // Y軸目盛の幅 scaleStepWidth : 10, // Y軸の開始数値 scaleStartValue : 0, //========================================
// グリッド線の幅(太さ) scaleGridLineWidth : 10, // グリッド線の色 scaleGridLineColor : "rgba(255, 0, 0, 1)", // グラフとY軸、X軸、グリッド線が // 被った時の描画優先順位 scaleOverlay : true, // グリッド線の描画有効無効 scaleShowGridLines : false,
// X軸、Y軸の目盛ラベルの大きさ scaleFontSize : 32, // X軸、Y軸の目盛ラベルの文字色 scaleFontColor : "#F00", // Y軸の目盛ラベル表示内容 scaleLabel : "<%=value%>円" // X軸、Y軸の目盛ラベルのスタイル scaleFontStyle : "bold", // X軸、Y軸の目盛ラベルのフォント scaleFontFamily : "'Comic Sans MS'", // Y軸の目盛ラベル表示有効無効 scaleShowLabels : false,
//======================================= // 点の色情報はデータ作成時に設定します。 //======================================= // 点表示の有効無効 pointDot : true, // 点の半径 pointDotRadius : 10, // 点の円周線の太さ pointDotStrokeWidth : 10,
//============================================ // データ間の線の色と、X軸とデータ間の塗りつぶし色 // 情報はデータ作成時に設定します。 //============================================ // データ(点)間の線表示の有効無効 // 現在オプションは存在するが未実装(2013/08現在) datasetStroke : true, // データ(点)間を繋ぐ線の太さ datasetStrokeWidth : 10, // X軸とデータ間の塗りつぶし有効無効 datasetFill :true, // グラフ線曲線化の有効無効 bezierCurve : true,
//======================================== // アニメーション設定 //======================================== // アニメーションの有効無効 animation : true, // アニメーション時間 animationSteps : 200, // アニメーション緩和効果種類 animationEasing : "easeInQuart", // アニメーション終了時コールバック関数 onAnimationComplete : function(){ alert("アニメーション終了!"); };
var options = { // 色(文字列)- X軸、Y軸の色 scaleLineColor : "rgba(0, 20, 0, 1)", // 文字列 - グリッド線の色 scaleGridLineColor : "rgba(0, 20, 0, 1)", // Y軸のラベル変更 scaleLabel : "<%=value%>万人", // グラフ線曲線化の無効 bezierCurve : false, // アニメーションの有効 animation : true };
// 全てデフォルト値で描画 var options = {};
###【例】
new Chart(context).Line(data, options);
###【関数名】
getCSVFile = function(){ $.ajax({ url:"./data/sales.csv", success: loadSuccess, error: loadError }); };
csvSales = $.csv.toArrays(obj, {onParseValue: $.csv.hooks.castToScalar});
// データ変数作成 datas = makeLineChartData(csvSales);
// オプション変数作成 options = makeLineChartOptions();
new Chart(canvas).Line(datas, options);