- 「数値表示」は指定しない→文字や数値はすべてOverWriteで指定
- 円中心に文字列と合計を表示
- 各要素の扇型中心付近に、データと比率（％をつける）を表示
- 円弧の中点から直線を引き出し要素名を表示
このとき、円弧中心が中心より右か左かで方向を変える
|
function chartjsOverWriteExecute() {
// ======= クリックから得られた情報
var GXmin = 50;
var GYmax = 0;
var GXmax = 350;
var GYmin = 300;
// ======= 入力した情報
var グラフ種類 = 'ドーナッツ';
var 要素数 = 4;
var 要素名 = ['賛成','中間','反対','無回答'];
var データ = [
[200,150,100,50]
];
// ====== 計算による各座標
var 中心Ｘ = 200;
var 中心Ｙ = 150;
var 半径 = 150.0;
var 合計 = 500;
var 比率 = [40.0,30.0,20.0,10.0];
// 角度は扇形の中央、円周との交点の座標
var 円周Ｘ = [343,154,57,154];
var 円周Ｙ = [104,293,104,7];
// 扇形のほぼ中央の座標
var 内周Ｘ = [300,168,100,168];
var 内周Ｙ = [118,250,118,50];
// 円周の外部に描いた仮想円のＸ座標。要素名を表示することが多い
var 外周Ｘ = [371,144,29,144];
var 外周Ｙ = [94,321,94,-21];
var canvas = document.getElementById('chartjsキャンバス');
var ctx = canvas.getContext('2d');
// ====================================== 円中央に合計値を表示
ctx.strokeStyle = 'black';
ctx.font = '18px serif';
ctx.textAlign = 'center';
ctx.strokeText("質問Ａ", 中心Ｘ, 中心Ｙ-15);
var 合計文字列 = "(n=" + 合計 + ")";
ctx.strokeText(合計文字列, 中心Ｘ, 中心Ｙ+15);
for (var j = 0; j < 要素数; j++) {
// ====================================== 各要素に回答数と比率を表示
ctx.font = '14px serif';
ctx.strokeText(データ[0][j], 内周Ｘ[j], 内周Ｙ[j]-10);
ctx.strokeText((比率[j] + "%"), 内周Ｘ[j], 内周Ｙ[j]+10);
// ====================================== 円弧から線を引く
ctx.beginPath();
ctx.moveTo(円周Ｘ[j], 円周Ｙ[j]);
if (円周Ｘ[j] > 中心Ｘ) var 線長 = 20; else 線長 = -20;
ctx.lineTo(円周Ｘ[j]+線長, 円周Ｙ[j]);
ctx.closePath(); //
ctx.lineWidth = 1;
ctx.stroke();
// ====================================== 要素名の表示
if (円周Ｘ[j] > 中心Ｘ) ctx.textAlign = 'start'; else ctx.textAlign = 'end';
ctx.strokeText(要素名[j], 円周Ｘ[j]+線長, 円周Ｙ[j]+7);
}
}
|
