// ===================================================================================================== クリック点の座標表示
function chartjsCanvasClick() {
var canvas = document.getElementById('chartjsキャンバス');
var ctx = canvas.getContext('2d');
canvas.onclick = function(e) {
var rect = e.target.getBoundingClientRect();
var mouseX = e.clientX - Math.floor(rect.left);
var mouseY = e.clientY - Math.floor(rect.top);
alert("x=" + mouseX + ", y=" + mouseY);
}
}
// ===================================================================================================== 補助関数
function dataLabelPluginList(グラフ種類) {
var 表示 = "";
表示 += "var dataLabelPlugin = {
";
表示 += " afterDatasetsDraw: function(chart) {
";
表示 += " var ctx = chart.ctx;
";
表示 += " chart.data.datasets.forEach(function(dataset, 系列) {
";
表示 += " var meta = chart.getDatasetMeta(系列);
";
表示 += " if (!meta.hidden) {
";
表示 += " meta.data.forEach(function(element, 要素) {
";
表示 += " // ステップ1 数値を文字列に変換
";
表示 += " var データ数値 = dataset.data[要素];
";
if (グラフ種類 == "帯グラフ") 表示 += " var データ文字列 = データ数値.toString() + '%';
";
else 表示 += " var データ文字列 = データ数値.toString();
";
表示 += " // ステップ2 文字列の書体
";
表示 += " ctx.fillStyle = 'black'; // 色 'rgb(0, 0, 0)', 'rgba(192, 80, 77, 0.7)'
";
表示 += " var fontSize = 14; // サイズ
";
表示 += " var fontStyle = 'normal'; // 書体 'bold', 'italic'
";
表示 += " var fontFamily = 'serif'; // フォントの種類 'sans-serif', 'MS 明朝'
";
表示 += " ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
";
表示 += " // ステップ3 文字列の位置の基準点
";
表示 += " ctx.textAlign = 'center'; // 文字列 start, end, left, right, center
";
表示 += " ctx.textBaseline = 'middle'; // 文字高 middle, top, bottom
";
表示 += " // ステップ4 文字列のグラフでの位置
";
表示 += " var padding = 5; // グラフ基準点と文字列の距離。適宜修正
";
表示 += " var position = element.tooltipPosition();
";
表示 += " //文字列の表示 fillText(文字列, X位置, Y位置)
";
if ( (グラフ種類 == "積上げ水平棒グラフ")||(グラフ種類 == "帯グラフ") ) {
表示 += " ctx.textAlign = 'end'; // 文字列末尾位置
";
表示 += " ctx.fillText(データ文字列, position.x-10, position.y);
";
}
else if (グラフ種類 == "積上げ棒グラフ")
表示 += " ctx.fillText(データ文字列, position.x, position.y + (fontSize / 2) + padding);
";
else
表示 += " ctx.fillText(データ文字列, position.x, position.y - (fontSize / 2) - padding);
";
表示 += " });
";
表示 += " }
";
表示 += " });
";
表示 += " }
";
表示 += "}
";
return 表示;
}
// =====================================================================================================
function chartjsLineBar(引数) {
var グラフ種類 = 引数.グラフ種類;
var 軸ラベル = 引数.軸ラベル;
var 系列名 = 引数.系列名;
var データ = 引数.データ;
var タイトル = 引数.タイトル;
var 数値表示 = 引数.数値表示;
// =================== 入力情報の分析
var 軸長 = 軸ラベル.length;
var 正規表現 = /^[+,-]?([1-9]\d*|0)(\.\d+)?$/;
if (正規表現.test(軸ラベル[0])) var 軸型 = "数値"; else 軸型 = "文字列";
var 系列数 = 系列名.length;
if ( (グラフ種類 == "複棒グラフ")
|| (グラフ種類 == "積上げ棒グラフ") ) var タイプ = "bar";
else if ( (グラフ種類 == "折線グラフ")
|| (グラフ種類 == "積上げ折線グラフ")
|| (グラフ種類 == "曲線グラフ")
|| (グラフ種類 == "積上げ曲線グラフ") ) タイプ = "line";
else if (グラフ種類 == "積上げ水平棒グラフ") タイプ = "horizontalBar";
if ( (グラフ種類 == "積上げ棒グラフ")
||(グラフ種類 == "積上げ水平棒グラフ")
||(グラフ種類 == "積上げ折線グラフ")
||(グラフ種類 == "積上げ曲線グラフ") ) var 積上げ = true;
else 積上げ = false;
if (引数.系列色 !== undefined) {
var 系列色 = 引数.系列色;
}
else {
if (タイプ == "line") 系列色 = [ 'red', 'blue', 'green', 'yellow', 'purple' ];
else 系列色 = [ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(255,0,255,0.5)', 'rgba(0,255,255,0.5)'];
}
if ((数値表示 !== undefined) && ( (数値表示 == true)||(数値表示 == "true") ) ) 数値表示 = true; else 数値表示 = false;
// ★★=================== 配列の表示
";
function 軸ラベル表示() {
var 表示 = "[";
for (var j = 0; j < 軸長; j++) {
if (軸型 == "数値") 表示 += 軸ラベル[j];
else 表示 += "'" + 軸ラベル[j] + "'";
if (j < 軸長-1) 表示 += ",";
}
表示 += "]";
return 表示;
}
function データ表示(i) {
var 要素数 = データ[i].length;
var 表示 = "[";
for (var j = 0; j < 要素数; j++) {
表示 += データ[i][j];
if (j < 要素数-1) 表示 += ",";
}
表示 += "]";
return 表示;
}
// =====================================================================
var 出力 = "
"; // ======================= Plaginの作成 if (数値表示) 出力 += dataLabelPluginList(グラフ種類); // ======================= メインの作成 出力 += "function chartjsProgram() {"; var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ===================================================================================================== function chartjs1Bar(引数) { var グラフ種類 = "単棒グラフ"; var 軸ラベル = 引数.軸ラベル; var データ = 引数.データ; var 系列色 = 引数.系列色; var タイトル = 引数.タイトル; var 数値表示 = 引数.数値表示; // =================== 入力情報の分析 var 要素数 = 軸ラベル.length; if (系列色.length == 1) { for (var j = 1; j < 要素数; j++) { 系列色[j] = 系列色[0]; } } if ((数値表示 !== undefined) && ( (数値表示 == true)||(数値表示 == "true") ) ) 数値表示 = true; else 数値表示 = false; // ===================================================================== var 出力 = "
"; 出力 += " var ctx = document.getElementById('chartjsキャンバス').getContext('2d');
"; 出力 += " var myChart = new Chart(ctx, {
"; 出力 += " type: '" + タイプ + "',
"; 出力 += " data: {
"; 出力 += " labels: " + 軸ラベル表示() + ",
"; 出力 += " datasets: [
"; for (var i = 0; i < 系列数; i++) { 出力 += " {
"; 出力 += " label: '" + 系列名[i] + "',
"; 出力 += " data: " + データ表示(i) + ",
"; // ●● if ( (タイプ == "bar") || (タイプ == "horizontalBar") ){ 出力 += " backgroundColor: '" + 系列色[i] + "',
"; 出力 += " borderColor: 'black', // 棒の枠の色
"; 出力 += " borderWidth: 1 // その太さ
"; } else if (タイプ == "line") { if ( (グラフ種類 == "折線グラフ") || (グラフ種類 == "積上げ折線グラフ") ) 出力 += " tension: 0, // 折線=0, 曲線=0.5
"; else 出力 += " tension: 0.5, // 折線=0, 曲線=0.5
"; 出力 += " fill: false, // X軸との間に色を付けない
"; 出力 += " borderColor: '" + 系列色[i] + "', // 線・点の色
"; 出力 += " borderWidth: 2 // 線の太さ
"; } if (i < 系列数-1) 出力 += " },
"; else 出力 += " }
"; } 出力 += " ]
"; 出力 += " },
"; // ====================================================== options 出力 += " options: {
"; 出力 += " responsive: false,
"; // ====================================================== title タイトル if (引数.タイトル !== undefined) { 出力 += " title: { // タイトルの表示(タイトル: 'タイトル文')
"; 出力 += " display: true,
"; 出力 += " fontSize: 18,
"; 出力 += " text: '" + 引数.タイトル + "'
"; 出力 += " },
"; } // ====================================================== legend 凡例位置 if ( (引数.凡例位置 == "下") || (引数.凡例位置 == "右") ){ 出力 += " legend: { // 凡例の表示位置 (凡例位置: '下'|'右' 省略時は上)
"; if (引数.凡例位置 == "下") 出力 += " position: 'bottom',
"; else 出力 += " position: 'right',
"; 出力 += " },
"; } // ====================================================== scales 軸関係 出力 += " scales: {
"; // ====================================================== X軸 if ( (積上げ) ||(引数.横軸ラベル !== undefined) ) { 出力 += " xAxes: [
"; 出力 += " {
"; // ====================================================== stacked 積上げのとき true if (積上げ){ 出力 += " stacked: true,
"; } // ====================================================== scaleLabel 横軸ラベル表示 if (引数.横軸ラベル !== undefined) { 出力 += " scaleLabel: { // ★横軸ラベル設定
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 引数.横軸ラベル + "',
"; 出力 += " // 文字の色 fontColor: 'black', フォントサイズ fontSize: 12
"; 出力 += " },
"; } 出力 += " }
"; 出力 += " ],
"; } // ====================================================== Y軸 if ( (積上げ)||(引数.縦軸ラベル !== undefined)||(引数.ゼロ起点 !== undefined) ) { 出力 += " yAxes: [
"; 出力 += " {
"; // ====================================================== stacked 積上げのとき true if (積上げ){ 出力 += " stacked: true,
"; } // ====================================================== scaleLabel 縦軸ラベル表示 if (引数.縦軸ラベル !== undefined) { 出力 += " scaleLabel: { // ★縦軸ラベル設定
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 引数.縦軸ラベル + "',
"; 出力 += " // 文字の色 fontColor: 'black', フォントサイズ fontSize: 12
"; 出力 += " },
"; } // ====================================================== ticks ★ゼロ起点 if (引数.ゼロ起点 !== undefined) { 出力 += " ticks: {
"; 出力 += " beginAtZero: true, // y=0 を始点にする
"; 出力 += " // ここに min:a, max:b, stepSize:c を指定できます。
"; 出力 += " }
"; } 出力 += " }
"; 出力 += " ]
"; } 出力 += " }
"; 出力 += " },
"; // ====================================================== plugins 数値表示 if (数値表示) { 出力 += " plugins: [dataLabelPlugin]
"; } 出力 += " });
"; 出力 += "}
"; 出力 += "
"; // ======================= Plaginの作成 if (数値表示) 出力 += dataLabelPluginList(グラフ種類); // ======================= メインの作成 出力 += "function chartjsProgram() {"; var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ======================================================================================================================== function chartjsCombination(引数) { var グラフ種類 = "複合グラフ"; var 軸ラベル = 引数.軸ラベル; var 系列名 = 引数.系列名; var データ = 引数.データ; var 数値表示 = 引数.数値表示; // =================== 入力情報の分析 var 軸長 = 軸ラベル.length; var 正規表現 = /^[+,-]?([1-9]\d*|0)(\.\d+)?$/; if (正規表現.test(軸ラベル[0])) var 軸型 = "数値"; else 軸型 = "文字列"; var 系列数 = 系列名.length; if (引数.系列色 !== undefined) var 系列色 = 引数.系列色; else 系列色 = [ 'rgba(0,255,0, 0.5)', 'red']; if (引数.ゼロ起点 !== undefined) { var ゼロ起点 = 引数.ゼロ起点; } else { ゼロ始点 = [ false, false]; } if ((数値表示 !== undefined) && ( (数値表示 == true)||(数値表示 == "true") ) ) 数値表示 = true; else 数値表示 = false; // ★★=================== 配列の表示
"; 出力 += " var ctx = document.getElementById('chartjsキャンバス').getContext('2d');
"; 出力 += " var myChart = new Chart(ctx, {
"; 出力 += " type: 'bar',
"; 出力 += " data: {
"; 出力 += " labels: ["; for (j = 0; j < 要素数-1; j++) { 出力 += "'" + 軸ラベル[j] + "',"; } 出力 += "'" + 軸ラベル[要素数-1] + "'],
"; 出力 += " datasets: [
"; 出力 += " {
"; 出力 += " label: '系列',
"; 出力 += " data: ["; for (j = 0; j < 要素数-1; j++) { 出力 += データ[j] + ","; } 出力 += データ[要素数-1] + "],
"; 出力 += " backgroundColor: ["; for (j = 0; j < 要素数-1; j++) { 出力 += "'" + 系列色[j] + "',"; } 出力 += "'" + 系列色[要素数-1] + "'],
"; 出力 += " borderColor: 'black', // 棒の枠の色
"; 出力 += " borderWidth: 1 // その太さ
"; 出力 += " }
"; 出力 += " ]
"; 出力 += " },
"; // ====================================================== options 出力 += " options: {
"; 出力 += " responsive: false,
"; // ====================================================== title タイトル if (引数.タイトル !== undefined) { 出力 += " title: { // タイトルの表示(タイトル: 'タイトル文')
"; 出力 += " display: true,
"; 出力 += " fontSize: 18,
"; 出力 += " text: '" + 引数.タイトル + "'
"; 出力 += " },
"; } // ====================================================== legend 凡例位置 出力 += " legend: {
"; 出力 += " display: false,
"; 出力 += " },
"; // ====================================================== scales 軸関係 出力 += " scales: {
"; // ====================================================== X軸 if (引数.横軸ラベル !== undefined) { 出力 += " xAxes: [
"; 出力 += " {
"; // ====================================================== scaleLabel 横軸ラベル表示 if (引数.横軸ラベル !== undefined) { 出力 += " scaleLabel: { // ★横軸ラベル設定
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 引数.横軸ラベル + "',
"; 出力 += " // 文字の色 fontColor: 'black', フォントサイズ fontSize: 12
"; 出力 += " },
"; } 出力 += " }
"; 出力 += " ],
"; } // ====================================================== Y軸 if ( (引数.縦軸ラベル !== undefined)||(引数.ゼロ起点 !== undefined) ) { 出力 += " yAxes: [
"; 出力 += " {
"; // ====================================================== scaleLabel 縦軸ラベル表示 if (引数.縦軸ラベル !== undefined) { 出力 += " scaleLabel: { // ★縦軸ラベル設定
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 引数.縦軸ラベル + "',
"; 出力 += " // 文字の色 fontColor: 'black', フォントサイズ fontSize: 12
"; 出力 += " },
"; } // ====================================================== ticks ★ゼロ起点 if (引数.ゼロ起点 !== undefined) { 出力 += " ticks: {
"; 出力 += " beginAtZero: true, // y=0 を始点にする
"; 出力 += " // ここに min:a, max:b, stepSize:c を指定できます。
"; 出力 += " }
"; } 出力 += " }
"; 出力 += " ]
"; } 出力 += " }
"; 出力 += " },
"; // ====================================================== plugins 数値表示 if (数値表示) { 出力 += " plugins: [dataLabelPlugin]
"; } 出力 += " });
"; 出力 += "}
"; 出力 += "
"; // ======================= Plaginの作成 if (数値表示) 出力 += dataLabelPluginList(グラフ種類); // ======================= メインの作成 出力 += "function chartjsProgram() {"; var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ===================================================================================================== function chartjsHorizontalBar(引数) { var グラフ種類 = "積上げ水平棒グラフ"; var 軸ラベル = 引数.軸ラベル; var 系列名 = 引数.系列名; var データ = 引数.データ; var タイトル = 引数.タイトル; var 数値表示 = 引数.数値表示; // =================== 入力情報の分析 var 軸長 = 軸ラベル.length; var 正規表現 = /^[+,-]?([1-9]\d*|0)(\.\d+)?$/; if (正規表現.test(軸ラベル[0])) var 軸型 = "数値"; else 軸型 = "文字列"; var 系列数 = 系列名.length; var タイプ = "horizontalBar"; if (グラフ種類 == "積上げ水平線グラフ") var 積上げ = true; else 積上げ = false; if (引数.系列色 !== undefined) var 系列色 = 引数.系列色; else 系列色 = [ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(255,0,255,0.5)', 'rgba(0,255,255,0.5)']; if ((数値表示 !== undefined) && ( (数値表示 == true)||(数値表示 == "true") ) ) 数値表示 = true; else 数値表示 = false; // ★★=================== 配列の表示
"; 出力 += " var ctx = document.getElementById('chartjsキャンバス').getContext('2d');
"; 出力 += " var myChart = new Chart(ctx, {
"; 出力 += " type: 'bar',
"; 出力 += " data: {
"; 出力 += " labels: " + 軸ラベル表示() + ",
";; 出力 += " datasets: [
"; 出力 += " { // 系列1:折線グラフ
"; 出力 += " type: 'line',
"; 出力 += " label: '" + 系列名[1] + "',
"; 出力 += " data: " + データ表示(1) + ",
"; 出力 += " borderWidth: 2,
"; 出力 += " borderColor: '" + 系列色[1] + "',
"; 出力 += " tension: 0,
"; 出力 += " fill: false,
"; 出力 += " backgroundColor:'" + 系列色[1] + "',
"; 出力 += " yAxisID: 'Y右軸' // option でのY右軸の定義に従う
"; 出力 += " },
"; 出力 += " { // 系列0:棒グラフ
"; 出力 += " label: '" + 系列名[0] + "',
"; 出力 += " data: " + データ表示(0) + ",
"; 出力 += " backgroundColor: '" + 系列色[0] + "',
"; 出力 += " borderColor: 'black', // 棒の枠の色
"; 出力 += " borderWidth: 1, // その太さ
"; 出力 += " yAxisID: 'Y左軸' // option でのY左軸の定義に従う
"; 出力 += " }
"; 出力 += " ]
"; 出力 += " },
"; 出力 += " options: {
"; 出力 += " responsive: false,
"; if (引数.タイトル !== undefined) { 出力 += " title: { // タイトルの表示(タイトル: 'タイトル文')
"; 出力 += " display: true,
"; 出力 += " fontSize: 18,
"; 出力 += " text: '" + 引数.タイトル + "'
"; 出力 += " },
"; } if ( (引数.凡例位置 == "下") || (引数.凡例位置 == "右") ){ 出力 += " legend: { // 凡例の表示位置 (凡例位置: '下'|'右' 省略時は上)
"; if (引数.凡例位置 == "下") 出力 += " position: 'bottom',
"; else 出力 += " position: 'right',
"; 出力 += " },
"; } 出力 += " scales: {
"; 出力 += " yAxes: [
"; 出力 += " { // Y左軸の定義
"; 出力 += " id: 'Y左軸',
"; 出力 += " position: 'left',
"; 出力 += " gridLines: { // 補助線の定義
"; 出力 += " color: 'silver'
"; 出力 += " },
"; 出力 += " scaleLabel: { // 左側のラベル
"; 出力 += " display: true, //表示設定
"; 出力 += " labelString: '" + 系列名[0] + "', //ラベル
"; 出力 += " fontSize: 14, // フォントサイズ
"; 出力 += " fontColor: 'black'
"; 出力 += " },
"; 出力 += " ticks: {
"; 出力 += " fontColor: 'black',
"; if (ゼロ起点[0]) 出力 += " beginAtZero: true,
"; 出力 += " // ここに min:a, max:b, stepSize:c を指定できます。
"; 出力 += " }
"; 出力 += " },
"; 出力 += " { // Y右軸の定義
"; 出力 += " id: 'Y右軸',
"; 出力 += " position: 'right',
"; 出力 += " gridLines: { // 補助線の定義
"; 出力 += " color: '" + 系列色[1] + "'
"; 出力 += " },
"; 出力 += " scaleLabel: { // 右側のラベル
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 系列名[1] + "',
"; 出力 += " fontSize: 14, // フォントサイズ
"; 出力 += " fontColor: '" + 系列色[1] + "'
"; 出力 += " },
"; 出力 += " ticks: { // 右側の目盛り
"; 出力 += " fontColor: '" + 系列色[1] + "'
"; if (ゼロ起点[1]) 出力 += " beginAtZero: true,
"; 出力 += " // ここに min:a, max:b, stepSize:c を指定できます。
"; 出力 += " }
"; 出力 += " }
"; 出力 += " ]
"; 出力 += " }
"; 出力 += " },
"; // ====================================================== plugins 数値表示 if (数値表示) { 出力 += " plugins: [dataLabelPlugin]
"; } 出力 += " });
"; 出力 += "}
"; 出力 += "
"; // ======================= Plaginの作成 if (数値表示) 出力 += dataLabelPluginList(グラフ種類); // ======================= メインの作成 出力 += "function chartjsProgram() {"; var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ========================================================================================================================== function chartjsBand(引数) { // ============ var グラフ種類 = "帯グラフ"; var 質問名 = 引数.質問名; var 回答項目 = 引数.回答項目; var 回答色 = 引数.回答色; var 回答数 = 引数.回答数; var タイトル = 引数.タイトル; var 凡例位置 = 引数.凡例位置; var 数値表示 = 引数.数値表示; // ============ var 質問数 = 質問名.length; var 回答項目数 = 回答項目.length; 質問別回答数計 = []; for (var i = 0; i < 質問数; i++) { 質問別回答数計[i] = 0; for (var j = 0; j < 回答項目数; j++) { 質問別回答数計[i] += 1*回答数[i][j]; } } if ((数値表示 !== undefined) && ( (数値表示 == true)||(数値表示 == "true") ) ) 数値表示 = true; else 数値表示 = false; // ============ 回答数からデータへの変換 var データ = []; for (i = 0; i < 回答項目数; i++) { データ[i] = []; for (j = 0; j < 質問数; j++) { データ[i][j] = (回答数[j][i]/質問別回答数計[j]*100).toFixed(1); } } // ★★=================== 配列の表示
"; 出力 += " var ctx = document.getElementById('chartjsキャンバス').getContext('2d');
"; 出力 += " var myChart = new Chart(ctx, {
"; 出力 += " type: 'horizontalBar',
"; 出力 += " data: {
"; 出力 += " labels: " + 軸ラベル表示() + ",
"; 出力 += " datasets: [
"; for (var i = 0; i < 系列数; i++) { 出力 += " {
"; 出力 += " label: '" + 系列名[i] + "',
"; 出力 += " data: " + データ表示(i) + ",
"; 出力 += " backgroundColor: '" + 系列色[i] + "',
"; 出力 += " borderColor: 'black', // 棒の枠の色
"; 出力 += " borderWidth: 1 // その太さ
"; 出力 += " }"; if (i < 系列数-1) 出力 += ","; 出力 += "
"; } 出力 += " ]
"; 出力 += " },
"; // ====================================================== options 出力 += " options: {
"; 出力 += " responsive: false,
"; // ====================================================== title タイトル if (引数.タイトル !== undefined) { 出力 += " title: { // タイトルの表示(タイトル: 'タイトル文')
"; 出力 += " display: true,
"; 出力 += " fontSize: 18,
"; 出力 += " text: '" + 引数.タイトル + "'
"; 出力 += " },
"; } // ====================================================== legend 凡例位置 if ( (引数.凡例位置 == "下") || (引数.凡例位置 == "右") ){ 出力 += " legend: { // 凡例の表示位置 (凡例位置: '下'|'右' 省略時は上)
"; if (引数.凡例位置 == "下") 出力 += " position: 'bottom',
"; else 出力 += " position: 'right',
"; 出力 += " },
"; } // ====================================================== scales 軸関係 出力 += " scales: {
"; // ====================================================== X軸 if ( (グラフ種類 == "積上げ水平棒グラフ") ||(引数.横軸ラベル !== undefined) ) { 出力 += " xAxes: [
"; 出力 += " {
"; // ====================================================== stacked 積上げのとき true if (グラフ種類 == "積上げ水平棒グラフ"){ 出力 += " stacked: true,
"; } // ====================================================== scaleLabel 横軸ラベル表示 if (引数.横軸ラベル !== undefined) { 出力 += " scaleLabel: { // ★横軸ラベル設定
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 引数.横軸ラベル + "',
"; 出力 += " // 文字の色 fontColor: 'black', フォントサイズ fontSize: 12
"; 出力 += " },
"; } // ====================================================== ticks ★ゼロ起点 if (引数.ゼロ起点 !== undefined) { 出力 += " ticks: {
"; 出力 += " beginAtZero: true, // y=0 を始点にする
"; 出力 += " // ここに min:a, max:b, stepSize:c を指定できます。
"; 出力 += " }
"; } 出力 += " }
"; 出力 += " ],
"; } // ====================================================== Y軸 if ( (グラフ種類 == "積上げ水平棒グラフ")||(引数.縦軸ラベル !== undefined)||(引数.ゼロ起点 !== undefined) ) { 出力 += " yAxes: [
"; 出力 += " {
"; // ====================================================== stacked 積上げのとき true if (グラフ種類 == "積上げ水平棒グラフ"){ 出力 += " stacked: true,
"; } // ====================================================== scaleLabel 縦軸ラベル表示 if (引数.縦軸ラベル !== undefined) { 出力 += " scaleLabel: { // ★縦軸ラベル設定
"; 出力 += " display: true,
"; 出力 += " labelString: '" + 引数.縦軸ラベル + "',
"; 出力 += " // 文字の色 fontColor: 'black', フォントサイズ fontSize: 12
"; 出力 += " },
"; } 出力 += " }
"; 出力 += " ]
"; } 出力 += " }
"; 出力 += " },
"; // ====================================================== plugins 数値表示 if (数値表示) { 出力 += " plugins: [dataLabelPlugin]
"; } 出力 += " });
"; 出力 += "}
"; 出力 += "
"; // ======================= Plaginの作成 if (数値表示) { 出力 += "var dataLabelPlugin = {"; var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ======================================================================================== function chartjsPieDoughnut(引数) { var グラフ種類 = 引数.グラフ種類; var 要素名 = 引数.要素名; var 要素色 = 引数.要素色; var データ = 引数.データ; var 合計 = 0; var 要素数 = データ[0].length; for (var j = 0; j < 要素数; j++) { 合計 += 1*データ[0][j]; } var 凡例位置 = 引数.凡例位置; var 数量表示 = 引数.数量表示; if ( (数量表示 !== undefined) && ( (数量表示 == "true")||(数量表示 == true) ) ) 数量表示 = true; else 数量表示 = false; var タイトル = 引数.タイトル; if ( (グラフ種類 == "円グラフ") && (タイトル !== undefined) ) タイトル = タイトル + "(n=" + 合計 + ")"; // ======================================================================================== function 要素名表示() { 要素数 = 要素名.length; var 表示 = "["; for (j = 0; j < 要素数; j++) { 表示 += "'" + 要素名[j] + "'"; if (j < 要素数-1) 表示 += ","; } 表示 += "]"; return 表示; } function 要素色表示() { 要素数 = 要素色.length; var 表示 = "["; for (j = 0; j < 要素数; j++) { 表示 += "'" + 要素色[j] + "'"; if (j < 要素数-1) 表示 += ","; } 表示 += "]"; return 表示; } function データ表示() { 要素数 = データ[0].length; var 表示 = "["; for (j = 0; j < 要素数; j++) { 表示 += データ[0][j]; if (j < 要素数-1) 表示 += ","; } 表示 += "]"; return 表示; } // ======================================================================================== var 出力 = "
"; 出力 += " afterDatasetsDraw: function(chart) {
"; 出力 += " var ctx = chart.ctx;
"; 出力 += " chart.data.datasets.forEach(function(dataset, 系列) {
"; 出力 += " var meta = chart.getDatasetMeta(系列);
"; 出力 += " if (!meta.hidden) {
"; 出力 += " meta.data.forEach(function(element, 要素) {
"; 出力 += " // ステップ1 数値を文字列に変換
"; 出力 += " var データ数値 = dataset.data[要素];
"; 出力 += " var 比率 = データ数値.toString() + '%';
"; 出力 += " // ステップ2 文字列の書体
"; 出力 += " ctx.fillStyle = 'black'; // 色 'rgb(0, 0, 0)', 'rgba(192, 80, 77, 0.7)'
"; 出力 += " var fontSize = 14; // サイズ
"; 出力 += " var fontStyle = 'normal'; // 書体 'bold', 'italic'
"; 出力 += " var fontFamily = 'serif'; // フォントの種類 'sans-serif', 'MS 明朝'
"; 出力 += " ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
"; 出力 += " // ステップ3 文字列の位置の基準点
"; 出力 += " ctx.textAlign = 'end'; // 文字列 start, end, left, right, center
"; 出力 += " ctx.textBaseline = 'middle'; // 文字高 middle, top, bottom
"; 出力 += " // ステップ4 文字列のグラフでの位置
"; 出力 += " var padding = 5; // グラフ基準点と文字列の距離。適宜修正
"; 出力 += " var position = element.tooltipPosition();
"; 出力 += " //文字列の表示 fillText(文字列, X位置, Y位置)
"; 出力 += " ctx.fillText(比率, position.x-10, position.y);
"; 出力 += " });
"; 出力 += " }
"; 出力 += " });
"; 出力 += " }
"; 出力 += "}
"; } // ======================= メインの作成 出力 += "function chartjsProgram() {
"; 出力 += " var ctx = document.getElementById('chartjsキャンバス').getContext('2d');
"; 出力 += " var myChart = new Chart(ctx, {
"; 出力 += " type: 'horizontalBar',
"; 出力 += " data: {
"; 出力 += " labels: " + 質問名表示() + ",
"; 出力 += " datasets: [
"; for (var i = 0; i < 回答項目数; i++) { 出力 += " {
"; 出力 += " label: '" + 回答項目[i] + "',
"; 出力 += " data: " + データ表示(i) + ",
"; 出力 += " backgroundColor: '" + 回答色[i] + "',
"; 出力 += " borderColor: 'black', // 棒の枠の色
"; 出力 += " borderWidth: 1 // その太さ
"; if (i < 回答項目数-1) 出力 += " },
"; else 出力 += " }
"; } 出力 += " ]
"; 出力 += " },
"; // ====================================================== options 出力 += " options: {
"; 出力 += " responsive: false,
"; // ====================================================== title タイトル if (引数.タイトル !== undefined) { 出力 += " title: { // タイトルの表示(タイトル: 'タイトル文')
"; 出力 += " display: true,
"; 出力 += " fontSize: 18,
"; 出力 += " text: '" + 引数.タイトル + "'
"; 出力 += " },
"; } // ====================================================== legend 凡例位置 if ( (引数.凡例位置 == "下") || (引数.凡例位置 == "右") ){ 出力 += " legend: { // 凡例の表示位置 (凡例位置: '下'|'右' 省略時は上)
"; if (引数.凡例位置 == "下") 出力 += " position: 'bottom',
"; else 出力 += " position: 'right',
"; 出力 += " },
"; } // ====================================================== scales 軸関係 出力 += " scales: {
"; // ====================================================== X軸 出力 += " xAxes: [
"; 出力 += " {
"; 出力 += " stacked: true,
"; 出力 += " ticks: {
"; 出力 += " fontColor: 'black',
"; 出力 += " min: 0,
"; 出力 += " max: 100,
"; 出力 += " }
"; 出力 += " }
"; 出力 += " ],
"; // ====================================================== Y軸 出力 += " yAxes: [
"; 出力 += " {
"; 出力 += " stacked: true,
"; 出力 += " }
"; 出力 += " ]
"; 出力 += " }
"; 出力 += " },
"; // ====================================================== plugins 数値表示 if (数値表示) { 出力 += " plugins: [dataLabelPlugin]
"; } 出力 += " });
"; 出力 += "}
"; 出力 += "
"; // ======================================================================================== if ( (凡例位置 == "内")||(数量表示) ) { 出力 += "var dataLabelPlugin = {"; var ウインドウ = window.open("", "program","width=500, height=500,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ========================================================================================================================== function chartjsOverWrite(引数) { // ============================================= データ読込と系列数・要素数 var グラフ種類 = 引数.グラフ種類; var データ = 引数.データ; var GXmin = 引数.GXmin; var GYmax = 引数.GYmax; var GXmax = 引数.GXmax; var GYmin = 引数.GYmin; var Ymax = 引数.Ymax; var Ymin = 引数.Ymin; var YRmax = 引数.YRmax; var YRmin = 引数.YRmin; var Xmax = 引数.Xmax; var Xmin = 引数.Xmin; var 系列数 = データ.length; var 要素数 = データ[0].length; // =============== 帯グラフのデータ読込 if (グラフ種類 == "帯グラフ") { var 質問名 = 引数.質問名; var 回答項目 = 引数.回答項目; } // =============== pieグラフのデータ読込 else if ( (グラフ種類 == "円グラフ")||(グラフ種類 == "ドーナッツ") ) { var 要素名 = 引数.要素名; } // =============== 一般グラフのデータ読込 else { var 軸ラベル = 引数.軸ラベル; var 系列名 = 引数.系列名; } // ============================================= 出力用関数 function 文字列表示(配列, 表示名) { var 個数 = 配列.length; var 表示 = " var " + 表示名 + " = ["; for (var i = 0; i < 個数-1; i++) { 表示 += "'" + 配列[i] + "',"; } 表示 += "'" + 配列[個数-1] + "'];
"; 出力 += " afterDatasetsDraw: function(chart) {
"; 出力 += " var 合計 = " + 合計 + ";
"; 出力 += " var 凡例位置 = '" + 凡例位置 + "';
"; 出力 += " var 数量表示 = " + 数量表示 + ";
"; 出力 += " var ctx = chart.ctx;
"; 出力 += " chart.data.datasets.forEach(function(dataset, i) {
"; 出力 += " var meta = chart.getDatasetMeta(i);
"; 出力 += " if (!meta.hidden) {
"; 出力 += " meta.data.forEach(function(element, 要素) {
"; 出力 += " var 要素値 = dataset.data[要素];
"; 出力 += " ctx.fillStyle = 'black'; // 色 'rgb(0, 0, 0)', 'rgba(192, 80, 77, 0.7)'
"; 出力 += " var fontSize = 14; // サイズ
"; 出力 += " var fontStyle = 'bold'; // 書体 'bold', 'italic'
"; 出力 += " var fontFamily = 'serif'; // フォントの種類 'sans-serif', 'MS 明朝'
"; 出力 += " ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
"; 出力 += " ctx.textAlign = 'center'; // 文字列 start, end, left, right, center
"; 出力 += " ctx.textBaseline = 'middle'; // 文字高 middle, top, bottom
"; 出力 += " var padding = 5; // 点と文字列の距離
"; 出力 += " var position = element.tooltipPosition();
"; if (凡例位置 == "内") { 出力 += " var 要素名 = chart.data.labels[要素];
"; 出力 += " ctx.fillText(要素名, position.x, position.y-20);
"; } if (数量表示) { 出力 += " var データ値 = 'n=' + 要素値.toString();
"; 出力 += " var 比率 = (要素値/合計*100).toString() + '%';
"; 出力 += " ctx.fillText(比率, position.x, position.y);
"; 出力 += " ctx.fillText(データ値, position.x, position.y+20);
"; } 出力 += " });
"; 出力 += " }
"; 出力 += " });
"; 出力 += " }
"; 出力 += "}
"; } // ======================================================================================== if (グラフ種類 == "ドーナッツ") { 出力 += "// 中央にタイトルと合計を表示
"; 出力 += "var 上書きプラグインC = {
"; 出力 += " afterDatasetsDraw: function(chart) {
"; 出力 += " var cw = 400; // 下のchartjsキャンバスの.width
"; 出力 += " var ch = 300; // キャンバス.height
"; 出力 += " var ctx = chart.ctx;
"; 出力 += " ctx.textAlign = 'center';
"; 出力 += " ctx.strokeStyle = 'black';
"; 出力 += " ctx.font = '16px serif';
"; 出力 += " // cw, chの相対位置で表示位置を調整する
"; 出力 += " ctx.strokeText('" + タイトル + "', cw/2, ch/2-10); // タイトル
"; 出力 += " ctx.font = '12px serif';
"; 出力 += " ctx.strokeText('(n=" + 合計 + ")', cw/2, ch/2+10); // 合計=Σデータ
"; 出力 += " }
"; 出力 += "}
"; } // ======================================================================================== 出力 += "function chartjsProgram() {
"; 出力 += " var ctx = document.getElementById('chartjsキャンバス').getContext('2d');
"; 出力 += " var myChart = new Chart(ctx, {
"; if (グラフ種類 == "ドーナッツ") 出力 += " type: 'doughnut',
"; else if (グラフ種類 == "円グラフ") 出力 += " type: 'pie',
"; 出力 += " data: {
"; 出力 += " labels: " + 要素名表示() + ", // 要素名(賛成、反対など)
"; 出力 += " datasets: [
"; 出力 += " {
"; 出力 += " data: " + データ表示() + ",
"; 出力 += " backgroundColor: " + 要素色表示() + ", // 円弧の塗りつぶし色
"; 出力 += " borderColor: 'black', // 境界線の色
"; 出力 += " borderWidth: 2 // 境界線の幅
"; 出力 += " }
"; 出力 += " ]
"; 出力 += " },
"; 出力 += " options: {
"; 出力 += " responsive: false,
"; if (グラフ種類 == "ドーナッツ") 出力 += " cutoutPercentage: 40, // 中央空白サイズ% 0 円グラフ 40 ドーナッツ
"; else if (グラフ種類 == "ドーナッツ") 出力 += " cutoutPercentage: 0,
"; if ( (グラフ種類 == "円グラフ") && (タイトル !== undefined) ) { 出力 += " title: { // タイトルの表示
"; 出力 += " display: true,
"; 出力 += " fontSize: 18,
"; 出力 += " text: '" + タイトル + "'
"; 出力 += " },
"; } if (凡例位置 !== undefined) { 出力 += " legend: { // 凡例の表示位置 (凡例位置: '下'|'右'|'外' 省略時は上)
"; if (凡例位置 == "下") 出力 += " position: 'bottom'
"; else if (凡例位置 == "右") 出力 += " position: 'right'
"; else if ( (凡例位置 == "内") || (凡例位置 == "内") ) 出力 += " display: false
"; 出力 += " },
"; } if (凡例位置 == "外") { 出力 += " pieceLabel: {
"; 出力 += " render: 'label',
"; 出力 += " fontSize: 14,
"; 出力 += " fontColor: 'black',
"; 出力 += " position: 'outside'
"; 出力 += " }
"; } 出力 += " },
"; if (グラフ種類 == "ドーナッツ") 出力 += " plugins: [dataLabelPlugin, 上書きプラグインC]
"; else 出力 += " plugins: dataLabelPlugin
"; 出力 += " });
"; 出力 += "}
"; 出力 += "
"; 出力 += "function chartjsOverWriteExecute() {"; var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } // ========================================================================================================================== function chartjsCsvArray(CSVファイル, 軸, 表示場所) { // ===================================================== ファイル読込 var 読込文 = new XMLHttpRequest(); 読込文.open("GET", CSVファイル, false); //true:非同期,false:同期 読込文.send(null); var 改行コード = String.fromCharCode(10); var 元行 = 読込文.responseText.split(改行コード); // ===== 戻り値の変数 var 元配列 = []; var 元行数 = 0; var 元列数 = 0; // ===== 行数の決定 for (var i = 0; i < 元行.length; i++) { 元行[i] = 元行[i].replace(/^\s+|\s+$/g, ""); if (元行[i].length == 0) break; // 末尾最初の空行が来たら打切り 元行数++; } // ===== 列数の決定 元列数 = 元行[0].split(",").length; // ===== 元配列 for (var i = 0; i < 元行数; i++) { 元配列[i] = 元行[i].split(","); } // ===================================================== 各配列の作成 // ======== 軸ラベル var 軸ラベル = []; if (軸 == "row") { for (var j = 1; j < 元列数; j++) { 軸ラベル[j-1] = 元配列[0][j]; } } else { for (i = 1; i < 元行数; i++) { 軸ラベル[i-1] = 元配列[i][0]; } } // ==== 数値か文字列かを最初の要素で判定する var 正規表現 = /^[+,-]?([1-9]\d*|0)(\.\d+)?$/; if (!正規表現.test(軸ラベル[0])) { // 文字列 for (var n = 0; n < 軸ラベル.length; n++) { 軸ラベル[n] = "'" + 軸ラベル[n] + "'"; } } // ======== 系列名 var 系列名 = []; if (軸 == "row") { for (i = 1; i < 元行数; i++) { 系列名[i-1] = "'" + 元配列[i][0] + "'"; } } else { for (j = 1; j < 元列数; j++) { 系列名[j-1] = "'" + 元配列[0][j] + "'"; } } // ======== データ var データ = []; for (var m = 0; m < 系列名.length; m++) { データ[m] = []; if (軸 == "row") { for (n = 0; n < 軸ラベル.length; n++) { データ[m][n] = 元配列[m+1][n+1]; } } else { for (n = 0; n < 軸ラベル.length; n++) { データ[m][n] = 元配列[n+1][m+1]; } } } // ===================================================== 出力編集 var 出力 = "
"; 出力 += " // ======= クリックから得られた情報
"; 出力 += " var GXmin = " + GXmin + ";
"; 出力 += " var GYmax = " + GYmax + ";
"; 出力 += " var GXmax = " + GXmax + ";
"; 出力 += " var GYmin = " + GYmin + ";
"; if (Ymax !== undefined) 出力 += " var Ymax = " + Ymax + ";
"; if (Ymin !== undefined) 出力 += " var Ymin = " + Ymin + ";
"; if (YRmax !== undefined) 出力 += " var YRmax = " + YRmax + ";
"; if (YRmax !== undefined) 出力 += " var YRmin = " + YRmin + ";
"; if (Xmax !== undefined) 出力 += " var Xmax = " + Xmax + ";
"; if (Xmin !== undefined) 出力 += " var Xmin = " + Xmin + ";
"; 出力 += " // ======= 入力した情報
"; 出力 += " var グラフ種類 = '" + グラフ種類 + "';
"; if (グラフ種類 == "帯グラフ") { 出力 += " var 質問数 = " + 系列数 + ";
"; 出力 += " var 回答項目数 = " + 要素数 + ";
"; 出力 += 文字列表示(質問名, "質問名"); 出力 += 文字列表示(回答項目, "回答項目"); 出力 += 数値2表示(データ, "データ"); } else if ( (グラフ種類 == "円グラフ")||(グラフ種類 == "ドーナッツ") ) { 出力 += " var 要素数 = " + 要素数 + ";
"; 出力 += 文字列表示(要素名, "要素名"); 出力 += 数値2表示(データ, "データ"); } else { 出力 += " var 系列数 = " + 系列数 + ";
"; 出力 += " var 要素数 = " + 要素数 + ";
"; 出力 += 文字列表示(軸ラベル, "軸ラベル"); 出力 += 文字列表示(系列名, "系列名"); 出力 += 数値2表示(データ, "データ"); } // ============================================================== 座標の計算と出力 出力 += " // ====== 計算による各座標
"; var 端点X = []; var 中点X = []; var 端点Y = []; var 中点Y = []; // =============================================================================================== pie if (タイプ == "pie") { var 外点X = []; var 外点Y = []; var 中心X = (GXmin + GXmax)/2; var 中心Y = (GYmin + GYmax)/2; var 半径 = (GXmax - GXmin)/2; 出力 += " var 中心X = " + 中心X.toFixed(0) + ";
"; 出力 += " var 中心Y = " + 中心Y.toFixed(0) + ";
"; 出力 += " var 半径 = " + 半径.toFixed(1) + ";
"; var 合計 = 0; for (j = 0; j < 要素数; j++) { 合計 += 1*データ[0][j]; } 出力 += " var 合計 = " + 合計 + ";
"; var 円比率 = []; for (j = 0; j < 要素数; j++) { 円比率[j] = (データ[0][j]/合計*100).toFixed(1); } 出力 += 数値表示(円比率, '比率'); if (グラフ種類 == "ドーナッツ") var 中点比率 = 0.7; else 中点比率 = 0.55; var 単位角度 = 2*3.1416/100; // 比率0.01当たりの角度(ラジアン) for (j = 0; j < 要素数; j++) { if (j == 0) var 比率累計 = 0; else 比率累計 += 1*円比率[j-1]; var 角度 = ( 比率累計 + 円比率[j]/2 ) * 単位角度; var 相対X = 半径*Math.sin(角度); // 円周点の中心からのX座標距離 var 相対Y = 半径*Math.cos(角度); 端点X[j] = 中心X + 相対X; 端点Y[j] = 中心Y - 相対Y; 中点X[j] = 中心X + 中点比率*相対X; 中点Y[j] = 中心Y - 中点比率*相対Y; 外点X[j] = 中心X + 1.2*相対X; 外点Y[j] = 中心Y - 1.2*相対Y; } 出力 += " // 角度は扇形の中央、円周との交点の座標
"; 出力 += 数値表示(端点X, "円周X", 0); 出力 += 数値表示(端点Y, "円周Y", 0); 出力 += " // 扇形のほぼ中央の座標
"; 出力 += 数値表示(中点X, "内周X", 0); 出力 += 数値表示(中点Y, "内周Y", 0); 出力 += " // 円周の外部に描いた仮想円のX座標。要素名を表示することが多い
"; 出力 += 数値表示(外点X, "外周X", 0); 出力 += 数値表示(外点Y, "外周Y", 0); } // =============================================================================================== else if (グラフ種類 == "複合グラフ") { // =============== X座標の計算 var 軸幅 = (GXmax - GXmin) / 要素数; 中点X[0] = + GXmin + 軸幅/2; for (var j = 1; j < 要素数; j++) { 中点X[j] = 中点X[j-1] + 軸幅; } 出力 += 数値表示(中点X, "軸X", 0); // =============== 棒グラフのY座標の計算 var 補正GY = (GYmin-GYmax)/(Ymax-Ymin); for (j = 0; j < 要素数; j++) { 端点Y[j] = GYmin - (データ[0][j] - Ymin)*補正GY; 中点Y[j] = (端点Y[j] + GYmin) / 2; } 出力 += 数値表示(端点Y, "軸上辺Y", 0); 出力 += 数値表示(中点Y, "軸中点Y", 0); // =============== 棒グラフのY座標の計算 補正GY = (GYmin-GYmax)/(YRmax-YRmin); for (j = 0; j < 要素数; j++) { 端点Y[j] = GYmin - (データ[1][j] - YRmin)*補正GY; } 出力 += 数値表示(端点Y, "点Y", 0); } // =============================================================================================== else if (グラフ種類 == "帯グラフ") { 出力 += " // ======= 統計値
"; var 合計 = 0; var 系列合計 = []; for (i = 0; i < 系列数; i++) { 系列合計[i] = 0; for (j = 0; j < 要素数; j++) { 系列合計[i] += 1*データ[i][j]; } 合計 += 系列合計[i]; } 出力 += 数値表示(系列合計, "質問別回答数合計", 0); 出力 += " var 回答数合計 = " + 合計 + ";
"; var 帯比率 = []; for (i = 0; i < 系列数; i++) { 帯比率[i] = []; for (j = 0; j < 要素数; j++) { 帯比率[i][j] = (データ[i][j] / 系列合計[i] * 100); } } 出力 += 数値2表示(帯比率, "比率", 1); 出力 += " // ======= 座標
"; for (i = 0; i < 系列数; i++) { 端点X[i] = []; 中点X[i] = []; } // =============== Y座標の計算 var 軸幅 = (GYmin - GYmax) / 系列数; 中点Y[0] = + GYmax + 軸幅/2; for (j = 1; j < 系列数; j++) { 中点Y[j] = 中点Y[j-1] + 軸幅; } 出力 += 数値表示(中点Y, "軸Y", 0); // =============== X座標の計算 補正GX = (GXmax-GXmin)/100; for (i = 0; i < 系列数; i++) { 端点X[i][0] = GXmin + (帯比率[i][0])*補正GX; 中点X[i][0] = GXmin + (帯比率[i][0])*補正GX/2; for (j = 1; j < 要素数; j++) { 端点X[i][j] = 端点X[i][j-1] + 帯比率[i][j]*補正GX; 中点X[i][j] = 端点X[i][j-1] + 帯比率[i][j]*補正GX/2; } } 出力 += 数値2表示(端点X, "軸右端X", 0); 出力 += 数値2表示(中点X, "軸中央X", 0); } // =============================================================================================== else if (タイプ == "horizontalBar") { for (i = 0; i < 系列数; i++) { 端点X[i] = []; 中点X[i] = []; } // =============== Y座標の計算 var 軸幅 = (GYmin - GYmax) / 要素数; 中点Y[0] = + GYmax + 軸幅/2; for (j = 1; j < 要素数; j++) { 中点Y[j] = 中点Y[j-1] + 軸幅; } 出力 += 数値表示(中点Y, "軸Y", 0); // =============== X座標の計算 補正GX = (GXmax-GXmin)/(Xmax-Xmin); for (j = 0; j < 要素数; j++) { 端点X[0][j] = GXmin + (データ[0][j] - Xmin)*補正GX; 中点X[0][j] = 端点X[0][j]/2; for (i = 1; i < 系列数; i++) { 端点X[i][j] = 端点X[i-1][j] + データ[i][j]*補正GX; 中点X[i][j] = 端点X[i-1][j] + データ[i][j]*補正GX/2; } } 出力 += 数値2表示(端点X, "右端X", 0); 出力 += 数値2表示(中点X, "中央X", 0); } // =============================================================================================== else if ( (タイプ == "bar") ||(タイプ == "line") ) { for (i = 0; i < 系列数; i++) { 端点Y[i] = []; 中点Y[i] = []; } // =============== X座標の計算 var 軸幅 = (GXmax - GXmin) / 要素数; if (グラフ種類 == "複棒グラフ") { // 複数の軸 for (i = 0; i < 系列数; i++) { 中点X[i] = []; } var 系列軸幅 = 軸幅 / (系列数+0.5); 中点X[0][0] = GXmin + 系列軸幅/4 + 系列軸幅/2; for (i = 1; i < 系列数; i++) { 中点X[i][0] = 中点X[i-1][0] + 系列軸幅; } for (i = 0; i < 系列数; i++) { for (j = 1; j < 要素数; j++) { 中点X[i][j] = 中点X[i][j-1] + 軸幅; } } 出力 += 数値2表示(中点X, "軸X", 0); } else { // ======= 1系列1軸 中点X[0] = + GXmin + 軸幅/2; for (var j = 1; j < 要素数; j++) { 中点X[j] = 中点X[j-1] + 軸幅; } if (タイプ == "bar") 出力 += 数値表示(中点X, "軸X", 0); else 出力 += 数値表示(中点X, "点X", 0); } // =============== Y座標の計算 補正GY = (GYmin-GYmax)/(Ymax-Ymin); if (積上げ) { for (j = 0; j < 要素数; j++) { 端点Y[0][j] = GYmin - (データ[0][j] - Ymin)*補正GY; 中点Y[0][j] = 端点Y[0][j]/2; for (i = 1; i < 系列数; i++) { 端点Y[i][j] = 端点Y[i-1][j] - データ[i][j]*補正GY; 中点Y[i][j] = 端点Y[i-1][j] - データ[i][j]*補正GY/2; } } } else { for (j = 0; j < 要素数; j++) { for (i = 0; i < 系列数; i++) { 端点Y[i][j] = GYmin - (データ[i][j] - Ymin)*補正GY; 中点Y[i][j] = 端点Y[i][j]/2; } } } if (タイプ == "bar") 出力 += 数値2表示(端点Y, "軸上辺Y", 0); else 出力 += 数値2表示(端点Y, "点Y", 0); if (積上げ) { if (タイプ == "bar") 出力 += 数値2表示(中点Y, "軸中央Y", 0); else 出力 += 数値2表示(中点Y, "点間中央Y", 0); } } // ======================================================================= 出力 += " // ======= Canvas への上書きの基本命令 (Canvas入門などを参照)
"; 出力 += " var canvas = document.getElementById('chartjsキャンバス');
"; 出力 += " var ctx = canvas.getContext('2d');
"; 出力 += " // 文字
" 出力 += " // ctx.strokeStyle = 'black'; // 文字の色指定
"; 出力 += " // ctx.font = '12px serif'; // 文字の大きさや字体の指定
"; 出力 += " // ctx.textAlign = 'center'; // 表示位置、start,endなど
"; 出力 += " // ctx.strokeText(表示文字列, X座標, Y座標); // 文字の表示
"; 出力 += " // 直線
" 出力 += " // ctx.beginPath(); // 線の指定
"; 出力 += " // ctx.moveTo(x0, y0); // 始点座標
"; 出力 += " // ctx.lineTo(x1, y1); // 終点座標
"; 出力 += " // ctx.closePath(); //
"; 出力 += " // ctx.strokeStyle = 'red'; // 線の色
"; 出力 += " // ctx.lineWidth = 2; // 線の太さ
"; 出力 += " // ctx.stroke(); // 線の表示
"; 出力 += " // 長方形
" 出力 += " // ctx.rect(x0,y0, x1, y1); // 長方形の指定
"; 出力 += " // ctx.strokeStyle = 'black'; // 枠の色
"; 出力 += " // ctx.lineWidth = 1; // 枠の太さ
"; 出力 += " // ctx.stroke(); // 長方形の表示
"; 出力 += " // 円
" 出力 += " // ctx.beginPath(); // 線の指定
"; 出力 += " // ctx.arc(x, y, r, 0, 2*Math.PI, true);
"; 出力 += " // x,y:中心、r:半径、0, 2*Math.PI;弧の開始・終了角度、true:反時計回り
"; 出力 += " // ctx.closePath(); //
"; 出力 += " // ctx.strokeStyle = 'purple'; // 円弧の色
"; 出力 += " // ctx.stroke(); // 円弧の表示
"; 出力 += " // ctx.strokeStyle = 'red'; // 線の色
"; 出力 += " // ctx.lineWidth = 2; // 線の太さ
"; 出力 += " // ctx.fillStyle = 'lime'; // 円内部の色
"; 出力 += " // ctx.fill(); // 塗りつぶし
"; 出力 += "}
"; 出力 += "
"; // ====== 軸ラベル 出力 += "var 軸ラベル = ["; for (n = 0; n < 軸ラベル.length; n++) { 出力 += 軸ラベル[n]; if (n < 軸ラベル.length-1) 出力 += ","; } 出力 += "];"; // ===================================================== 出力表示 if (表示場所 == "window") { var ウインドウ = window.open("", "_blank","width=500, height=300,resizable=yes, scrollbars=yes"); ウインドウ.document.open(); ウインドウ.document.write(出力); ウインドウ.document.close(); } else if (表示場所 !== undefined) { document.getElementById(表示場所).innerHTML = 出力; } return [ 軸ラベル, 系列名, データ ]; }
"; // ====== 系列名 出力 += "var 系列名 = ["; for (m = 0; m < 系列名.length; m++) { 出力 += 系列名[m]; if (m < 系列名.length-1) 出力 += ", "; } 出力 += "];
"; // ====== データ 出力 += "var データ = [
"; for (m = 0; m < 系列名.length; m++) { 出力 += " ["; for (n = 0; n < 軸ラベル.length; n++) { 出力 += データ[m][n]; if (n < 軸ラベル.length-1) 出力 += ", "; } 出力 += "]"; if (m < 系列名.length-1) 出力 += ",
"; } 出力 += "
];"; 出力 += "