Category: レーダーチャート  (実験)  [JavScript]   Chart.js

[JavScript] Chart.jsを使ってレーダーチャートを描画する

(インストール されていないので、表現されず)

環境

Chart.js 0.2
ダウンロード

Chart.js | HTML5 Charts for your website.
からダウンロードしておきます
http://www.chartjs.org/
 
///////

///////
<script src="./Chart.min.js"></script>
<canvas id="canvas" height="450" width="600"></canvas>

<script type="text/javascript" src="http://www.chart.min.js"></script> 
<script type="text/javascript"> 
//上2行はなし(仮) 
var radarChartData = {
    labels : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    datasets : [
        {
            fillColor : "rgba(220, 220, 220, 0.5)",
            strokeColor : "rgba(220, 220, 220, 1)",
            pointColor : "rgba(220, 220, 220, 1)",
            pointStrokeColor : "#fff",
            data : [1, 59, 90, 81, 56, 55, 40, 30, 10, 40, 48, 58]
        },
        {
            fillColor : "rgba(151, 187, 205, 0.5)",
            strokeColor : "rgba(151, 187, 205, 1)",
            pointColor : "rgba(151, 187, 205, 1)",
            pointStrokeColor : "#fff",
            data : [28, 48, 40, 19, 96, 27, 100, 33, 63, 31, 64, 51]
        }
    ]
}
// オプション
var options = {
    // 値のラインが棒グラフの値の上にかぶさるようにするか    
    scaleOverlay : true,
    // 値の開始値などを自分で設定するか
    scaleOverride : false,
    
    // 以下の 3 オプションは scaleOverride: true の時に使用
    // 値のステップ数
    scaleSteps : 10,
    // 値のステップする大きさ
    scaleStepWidth : 10,
    // 値の始まりの値
    scaleStartValue : 0,
    // 値の円ラインの表示
    scaleShowLine : true,
    // 円ラインの色
    scaleLineColor : "rgba(0, 0, 0, .1)",
    // 円ラインの幅
    scaleLineWidth : 1,
    // ラベルの表示
    scaleShowLabels : true,
    // ラベルの表示フォーマット
    scaleLabel : "<%=value%>%",
    // ラベルのフォント
    scaleFontFamily : "'Arial'",
    // ラベルのフォントサイズ
    scaleFontSize : 12,
    // ラベルのフォントスタイル, normal, italic など
    scaleFontStyle : "italic",
    // ラベルの文字色
    scaleFontColor : "#666",    
    // ラベルの背景色を塗りつぶすか
    scaleShowLabelBackdrop : true,
    // ラベルの背景色
    scaleBackdropColor : "rgba(255, 255, 255, 0.8)",
    // ラベルの Padding 上下
    scaleBackdropPaddingY : 5,
    // ラベルの Padding 左右
    scaleBackdropPaddingX : 5,
    // 中央からポイントラベルに向かう線の表示
    angleShowLineOut : true,
    // 中央からポイントラベルに向かう線の色
    angleLineColor : "rgba(0, 0, 0, .1)",
    // 中央からポイントラベルに向かう線の幅
    angleLineWidth : 1,            
    // ポイントラベルのフォント
    pointLabelFontFamily : "'Arial'",
    // ポイントラベルのフォントスタイル
    pointLabelFontStyle : "normal",
    // ポイントラベルのサイズ
    pointLabelFontSize : 12,
    // ポイントラベルの色
    pointLabelFontColor : "#999",
    // 値の点の表示
    pointDot : true,
    // 値の点の大きさ
    pointDotRadius : 2,
    // 値の点の線の幅
    pointDotStrokeWidth : 1,
    // データ部分の枠線の表示?変化がなかった
    datasetStroke : true,
    // データ部分の枠線の幅
    datasetStrokeWidth : 1,
    // データ部分の塗りつぶし?変化がなかった
    datasetFill : true,
    // 表示の時のアニメーション
    animation : false,
    // アニメーションの速度 ( ステップ数 )
    animationSteps : 60,
    // アニメーションの種類, 以下が用意されている
    // linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic,
    // easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint,
    // easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine,
    // easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc,
    // easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack,
    // easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
    animationEasing : "easeOutQuad",
    // アニメーション終了後に実行する処理
    // animation: false の時にも実行されるようです
    // e.g. onAnimationComplete : function() {alert('complete');}
    onAnimationComplete : null
}
var chart = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, options);
</script> 
/////// 

レーダーチャート  (実験)  [JavScript]   Chart.js
(インストール なし 表現されず)
学習のためのメモ
//////
graph_radar_1

//////
graph_radar_2

//////
使い方

graph_radar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。

<div><canvas width="400" height="300" id="sample"></canvas></div>
上記タグは次の点に注意してください。

canvas要素は、必ずdiv要素で囲んでください。
canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。
canvas要素には、必ずid属性を記述してください。
HTMLのhead要素内に、次のJavaScriptコードを記述してください。
//////

//////
<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../html5jp/graph/radar.js"></script>
<script type="text/javascript">
window.onload = function() {
  var rc = new html5jp.graph.radar("sample");
  if( ! rc ) { return; }
  var items = [
    ["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
    ["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
  ];
  var params = {
    aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
  }
  rc.draw(items, params);
};
</script>
////// 
 前述のサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダはどこに設置しても構いません。html5jpフォルダの設置場所に合わせて、最初の2つのscript要素のsrc属性を書き換えてください。

グラフ描画処理は、前述の2つのjsファイルをロードした後に、script要素内に記述します。グラフ描画処理は、jsファイルとしてHTMLファイルと分離しても構いません。しかし、サンプルのように、onloadイベントハンドラを使うなどして、ブラウザがHTMLを読み込んでから処理が実行されるようにしてください。

グラフ描画処理では、まず最初に折線グラフ描画オブジェクトを生成します。

var rc = new html5jp.graph.radar("sample");
引数にはcanvas要素にセットされたid属性値を指定してください。もし、指定したid属性値を持つcanvas要素が見つからなかったり、canvas要素がdiv要素で囲まれていない場合は、何も返されません。

次に、グラフに描画したい項目をセットした配列を生成します。下記のように、各項目は、項目名と数値を格納した配列として定義します。

  var items = [
    ["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
    ["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
  ];
この例では、2組のチャートを表示することになります。最低1組は定義してください。また、最大10組まで定義することができます。

次に、aCapプロパティを持ったparamsオブジェクトを生成します。aCapプロパティには、レーダーチャートの各軸の指標を配列として定義します。

  var params = {
    aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
  }
以上のように、項目を定義したら、下記のようにレーダーチャートを描画するメソッドを実行します。

rc.draw(items, params);
rc.drawメソッドには、先ほど定義した項目の配列を第一引数にセットします。上記スクリプトが実行されると、canvas要素には次のようなレーダーチャートが描画されます。

[実際のサンプルを見る]
/////// 
描画の仕様

グラフは、以下の条件に基づいて描画されます。

描画可能なチャートは最大10組です。10個を超えた組を指定しても無視されます。
レーダーチャートの軸となる評価項目は、最大24個までです。
各軸の値の表示レンジは自動的に算出されます。この自動算出モードの場合、チャート中心の値は、セットされた項目値にかかわらず、固定的に 0 となります。また、グラフ領域の頂点の値は、セットされた値の最大値に値になります。(オプション指定によってレンジを明示的に指定することが可能です。)
上方に向かった軸にはデータラベル(数値)と、それに沿った補助線が自動的に引かれます。このデータラベルの間隔は5つを超えないよう自動的に算出されます。(オプション指定によってデータラベルの値を明示的に指定することが可能です。)
canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。
チャートのカスタマイズ

チャートの描画は、さまざまなオプションを指定することでカスタマイズすることができます。良く使うオプションの使い方を見ていきましょう。次のサンプルコードをご覧ください。
///////
window.onload = function() {
  var rc = new html5jp.graph.radar("sample");
  if( ! rc ) { return; }
  var items = [
    ["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
    ["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
  ];
  var params = {
    aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"],
    aMax: 6,
    aMin: 0,
    chartShape: "circle",
    faceColors: ["green", "olive"],
    aLinePositions: [0,1,2,3,4,5,6]
  };
  rc.draw(items, params);
};
////// 
window.onload = function() {
  var rc = new html5jp.graph.radar("sample");
  if( ! rc ) { return; }
  var items = [
    ["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
    ["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
  ];
  var params = {
    aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"],
    aMax: 6,
    aMin: 0,
    chartShape: "circle",
    faceColors: ["green", "olive"],
    aLinePositions: [0,1,2,3,4,5,6]
  };
  rc.draw(items, params);
};
////// 
オブジェクト params に注目してください。paramsに必要なプロパティをセットし、rc.drawメソッドの第二引数にparamsを指定すると、それに応じたレーダーチャートが描画されます。最初のサンプルでは、各軸の評価項目名称を配列としてセットするaCapプロパティを見てきました。ここでは、それ以外のプロパティをひとつずつ見ていきましょう。

プロパティ aMax は、軸の先端の値(最大値)を表します。指定がなければ、セットされた項目の値の最大値を自動算出して処理されますが、もし明示的に指定したい場合は、aMax に最大値を指定します。

プロパティ aMin は、軸の最小値を表します。つまりチャートの中心地点の値を表します。指定がなければ、0 で処理されます。

プロパティ chartShape はレーダーチャートの外形を表します。指定可能な値は "circle"(円)と "polygon"(多角形)のいずれかです。指定がなければ "polygon"(多角形)として処理されます。

プロパティ faceColors には、各組のチャート上の色を配列で指定します。個別に色を指定したい場合には、このプロパティを使ってください。指定がなければ、デフォルトの色が適用されます。

プロパティ aLinePositions には、チャート内に表示させたいデータラベル(値)を配列でセットします。指定がなければ、自動的にデータラベルの間隔が算出されます。自動的に算出された間隔を変更したい場合には、このプロパティを使ってください。

上記スクリプトが実行されると、canvas要素には次のようなレーダーチャートが描画されます。
[実際のサンプルを見る]
////// 

オプションリファレンス

rc.drawメソッドの第二引数に指定する params オブジェクトにセットできるプロパティは下表の通りです。

オプションプロパティ一覧
プロパティ初期値説明
aCap[]レーダーチャートの各軸の指標を表す文字列を配列として定義します。ここで定義された文字列が軸の先端に表示されます。
aCapColor"#000000"レーダーチャートの各軸の指標の文字列色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
aCapFontSize"12px"レーダーチャートの各軸の指標の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
aCapFontFamily"Arial,sans-serif"レーダーチャートの各軸の指標の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
aMaxnull軸の最大値を表します。指定がなければ、指定された項目の値の最大値が適用されます。もし軸のレンジを指定したい場合は、aMaxプロパティに最大値を、aMinプロパティに最小値セットしてください。
aMin0軸の最小値を表します。指定がなければ、0 とみなされます。もし軸のレンジを指定したい場合は、aMaxプロパティに最大値を、aMinプロパティに最小値セットしてください。
backgroundColor"#ffffff"canvas全体の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
cBackgroundColor"#eeeeee"チャート表示領域の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
cBackgroundGradationtruetrueをセットすると、チャート表示領域の中心から外に向けて色が濃く見えるように、うっすらとしたグラデーション効果が得られます。ただし、Internet Explorerの場合は、この効果は得られません。falseを指定すると無効になります。
chartShape"polygon"チャート表示領域の形状を表します。"polygon"(多角形) または "circle"(円) のいずれかのを指定してください。
faceColorsnullチャートに表示する各組の面の色を個別に指定することができます。指定する場合は、配列をセットしてください。
例:["green", "olive"]
faceAlpha0.1チャートに表示する各組の面の透明度を表します。0(完全に透明)から 1(不透明)の間の数値を指定してください。
borderAlpha0.5チャートに表示する各組の面の境界線の透明度を表します。0(完全に透明)から 1(不透明)の間の数値を指定してください。
borderWidth1チャート面の境界線の太さを表します。1 以上の数字を指定してください。
axisColor"#aaaaaa"軸の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
axisWidth1軸の太さを表します。0 以上の数字を指定してください。0 を指定するとx軸の線は表示されません。
aLinePositions"auto"補助線が表示される位置を表します。"auto" を指定すると、補助線の本数が5本を超えないように、自動的に補助線の位置が算出されます。もし明示的に指定したい場合は、補助線を引きたい位置に相当する値(数値)を配列で指定してください。
例:[0,1,2,3,4,5,6]
aLineWidth1補助線の太さを表します。0 以上の数字を指定してください。0 を指定すると補助線は表示されません。
aLineColor"#cccccc"補助線の線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
sLabeltruetrueを指定すると、スケールラベル(数値)が縦軸の左側に表示されます。falseを指定すると、非表示になります。
sLabelColor"#000000"縦軸の左側に表示されるスケールラベル(数値)の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
sLabelFontSize"10px"縦軸の左側に表示されるスケールラベル(数値)の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
sLabelFontFamily"Arial,sans-serif"縦軸の左側に表示されるスケールラベル(数値)の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
legendtruetrueを指定すると、凡例が表示されます。falseを指定すると非表示になります。ただし、canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。
legendFontSize"12px"凡例の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
legendFontFamily"Arial,sans-serif"凡例の文字のフォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
legendColor"#000000"凡例の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。

チャートに描画される各組の面の色のデフォルト値は下表の通りです。

チャート表示色初期値一覧
項目初期値
01
 
rgb(24,41,206)
02
 
rgb(198,0,148)
03
 
rgb(214,0,0)
04
 
rgb(255,156,0)
05
 
rgb(33,156,0)
06
 
rgb(33,41,107)
07
 
rgb(115,0,90)
08
 
rgb(132,0,0)
09
 
rgb(165,99,0)
10
 
rgb(24,123,0)

バージョンアップ履歴

2009-04-10 ver 1.0.1 → ver 1.0.2

  • Shift_JISで作成されたページでJavaScriptエラーになる問題を改修。

2009-03-25 ver 1.0.0 → ver 1.0.1

  • IE6で標準モードでレンダリングされるページに本ライブラリーを組み込んだ場合、グラフの表示がずれてしまう不具合を改修。
  • ExplorerCanvas Release 3がリリースされたとことに伴い、本ライブラリーに同梱されているExplorerCanvasもRelease 3に更新した。これに伴い、IE8標準モードでもグラフが表示されるようになった。

2007-10-11

  • ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007-2012 futomi http://www.html5.jp/

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。

謝辞

当サイトにて配布するJavaScriptライブラリには、Internet Explorerでも利用できるようにするため、ExplorerCanvas が同梱されています。
////// 

 

↑このページのトップヘ