2017/05/11
だいぶ以前になりますが、よそのサイトで公開してたものです。キャンバス要素が話題になったころ挑戦してみたものです。実用性はあまりなかもしれません。そもそもWebサイト上でHTMLベースで円グラフを作る必要があるか動画が疑問です。エクセルか何かで作って画像で張った方がはるかにきれいでいいと思います。
特徴としましてはピュアJSでできていることです。いや、ピュアJSなんて言葉ないと思います。ただ単にjQueryなど使っていないというだけです。画像ではないのでHTMLの中身を書き換えたらグラフが書き換わることだけがこのスクリプトのメリットかもしれません。ただオレオレ設定がいくつもあるので、そんなこと覚えてまで使うほどではないような気がします。参考までに
配色等はjsの中で変更可能です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>canvas要素</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="piechart_1.js"></script>
<style>canvas{border:solid 1px #666666;}</style>
</head>
<body>
<p>円グラフ</p>
<canvas id="newcanvas" width="210" height="300">
選択のポイント,0,
値段,50,
色,30,
味,20,
重さ,30
</canvas>
</body>
</html>
-
まではIE8以下でHTML5、canvas要素を使えるようにするGoogleのライブラリです。しかし、IE8以下では文字が表示されません。canvas要素はcanvas要素に対応していないブラウザでは内容が表示されるので今回サンプルではこの部分を削除しています。IE8以下では円グラフは全く表示されずに円グラフのデータが文字で表示されます。文字の無い円だけでも表示したければこの4行はこのまま残してください。<!--[if lt IE 9]></code>から<code><![endif]--> -
で円グラフを表示するためのJavaScriptを読み込みます。今回はHTMLファイルと同じ場所にJavaScriptファイルがあるという設定です。<script type="text/javascript" src="piechart.js"></script> -
はcanvas要素がわかりやすいように枠線を表示するためのものですからグラフとは直接関係ありません。<style type="text/css">canvas{border:solid 1px #666666;}</style> - グラフを表示したい場所に
を記述します。 width="210" height="300"は任意に変更可能です。小さい方の数値に合わせて円グラフの大きさが自動で決まります。id="newcanvas"は変更せずにそのまま記述してください。。<canvas height="300" id="newcanvas" width="210"></canvas> -
までにグラフの値を記述します。</canvas> - 1つ目がグラフのタイトル、2つ目が表示オプション、以降項目名、値、項目名、値と入力します。必ずカンマ『,』で区切ります。改行は任意です。
- 2つ目の表示オプションですが、0なら項目名の表示。１なら値の表示。2なら項目名と値の表示、それ以外なら何も表示されません。IE8以下はいずれでも文字は表示されません。
JavaScript
window.onload = piechart;
function piechart(){
/* <canvas>要素のノードオブジェクトの取得 */
var canvas=document.getElementById('newcanvas');
/* 未対応の場合処理終了 */
if(!canvas.getContext){
return false;
}
/* canvas内のデータを取得 */
var v = canvas.textContent || canvas.innerText;
/* 描画用のオブジェクトを取得する */
var cs = canvas.getContext('2d');
/* canvasの大きさを取得する */
var cw = canvas.width;
var ch = canvas.height;
// 円グラフを短いほうの長さの何割にするか
var maxper = 0.8;
if(cw <= ch){maxw = cw * maxper;}else{maxw = ch * maxper;}
/* 円グラフの色設定 */
var chartcolor = Array(
"#ff0000",
"#00ff00",
"#0000ff",
"#cc0000",
"#00cc00",
"#0000cc",
"#990000",
"#009900",
"#000099"
);
var backgroundchart = "#000000";
/* 引数を配列に入れる */
var allval=v.split(",");
n = m = 0;
val = new Array();
str = new Array();
// 値と項目名の2つの配列に分ける
for (var i=0;i<allval.length;i++){
if((i % 2) == 0){
//alert(allval[i]);
str[i/2]=allval[i];
}else{
if(i != 1){
m = parseFloat(allval[i]);
n = n + m;
}
val[Math.floor(i/2)]=parseFloat(allval[i]);
}
}
/* タイトルの表示 */
cs.beginPath();
cs.font = 'normal bold 20px sans-serif';
cs.textAlign = 'center';
cs.fillStyle="#000000";
cs.fillText(str[0],cw/2,ch/2-maxw/2-12);
/* 円グラフの背景の描画 */
cs.beginPath();
cs.fillStyle =backgroundchart;
cs.arc(cw/2,ch/2,maxw/2,0,Math.PI*2,false);
cs.fill();
/* 円グラフを描画 */
var rd = Math.PI * 2
// グラフの開始位置をy軸上にするため270度から描画
var st = rd / 360 *270;
for(var i = 1;i < val.length;i++){
cs.beginPath();
// 背景色を選択
cs.fillStyle = chartcolor[i-1];
cs.moveTo(cw/2,ch/2);
// rdは2πなのでそれに対する百分率
var end = rd*(val[i]/n);
// 扇形を描画
cs.arc(cw/2,ch/2,maxw/2,st,end+st,false);
cs.closePath();
cs.fill();
// 終了位置が次の開始位置
st = end+st;
}
/* グラフ内の文字の設定 */
cs.beginPath();
var fs=12;
cs.font = 'normal bold ' + fs + 'px sans-serif';
cs.textAlign = 'center';
cs.fillStyle="#ffffff";
// 項目名をどれだけ内側に寄せるか大きいほど内側
var off=3.5;
var st = rd / 360 *270;
// 扇形と同時に書くと文字が消えることがあるのでグラフ描画後文字のみ描画
for(var i = 1;i < val.length;i++){
var end = rd*(val[i]/n); //
if(val[0]==0){ // 項目名のみ
cs.fillText(str[i],Math.cos(st+end/2)*maxw/off+cw/2,Math.sin(st+end/2)*maxw/off+ch/2);
}else if(val[0]==1){ // 値のみ
cs.fillText(val[i],Math.cos(st+end/2)*maxw/off+cw/2,Math.sin(st+end/2)*maxw/off+ch/2);
}else if(val[0]==2){ // 項目名と値
cs.fillText(str[i],Math.cos(st+end/2)*maxw/off+cw/2,Math.sin(st+end/2)*maxw/off+ch/2);
cs.fillText(val[i],Math.cos(st+end/2)*maxw/off+cw/2,Math.sin(st+end/2)*maxw/off+ch/2+fs);
}
st = end+st;
}
}
- 1行目で
window.onload = piechart;してるので他のスクリプトがonloadになっているときは注意してください。 var maxper = 0.8;でcanvas要素の幅と高さの値の小さいほうの何割を円グラフにするか設定します。この設定は8割となっています。var chartcolor =以下は円グラフのそれぞれの色の設定です。9色まで設定していますがそれ以上必要、もしくは色の変更はここを調整してください。項目数に制限はありませんが項目名が読めなくなる可能性大です。cs.font = 'normal bold 20px sans-serif';とcs.fillStyle="#000000"は2回出てきますがそれぞれグラフタイトルの文字とグラフ内に書かれる文字の設定です。var fs=12;はグラフ内の文字の大きさです。var off=3.5;はグラフ内の文字の位置を設定しています。2より小さければグラフの外（現状文字色と背景色が白なので見えなくなる文字もあります。）大きければ円の中心に向かいます。
