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>
-
<!--[if lt IE 9]></code>から<code><![endif]-->
-
<script type="text/javascript" src="piechart.js"></script>
-
<style type="text/css">canvas{border:solid 1px #666666;}</style>
- グラフを表示したい場所に
<canvas height="300" id="newcanvas" width="210"></canvas>
-
</canvas>
- 1つ目がグラフのタイトル、2つ目が表示オプション、以降項目名、値、項目名、値と入力します。必ずカンマ『,』で区切ります。改行は任意です。
- 2つ目の表示オプションですが、0なら項目名の表示。1なら値の表示。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より小さければグラフの外(現状文字色と背景色が白なので見えなくなる文字もあります。)大きければ円の中心に向かいます。