複数canvasを表示状態のまま一つの画像に

質問

先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。
function imageDownload() {
var chartWidth = 350;
var chartHeight = 242;
var imageType = "image/png"
var imageFileName = "chart.png";
var bufferCanvas = document.createElement("canvas")
bufferCanvas.width = chartWidth * 1.82;
bufferCanvas.height = chartHeight * 2.2;
bufferCanvas.style.display = "none";
document.body.appendChild(bufferCanvas);
var ctx = bufferCanvas.getContext("2d");
// 背景色を設定（しない場合は透過）
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);
// グラフを貼り付け
for (i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
i % 2 == 1 ? 0 : chartWidth,
i <= 2 ? 0 : chartHeight
);
}
var imageURL = bufferCanvas.toDataURL(imageType);

そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。
<div class="row" style="width:100%;" >
<div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c
<canvas id="myChart1" width="400px" height="230px"></canvas></div>
<div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" >
<canvas id="myChart2" width="210px" height="210px"></canvas></div>
<div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;">
<canvas id="myChart3" width="210px" height="210px"></canvas></div>
<div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;">
<canvas id="myChart4" width="210px" height="210px"></canvas></div>
</div>

しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。
そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。

回答No.16

retorofan

続き

<script>
onload = function() {

// 色の設定 (original)
const color1 = ['red','green','skyblue'];
const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)'];

//グラフの描画関数
function displayChart(canvasId, chartType, datasets, options) {
var ctx = document.getElementById(canvasId);

var myPieChart = new Chart(ctx, {
type: chartType,
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
// Ｘ軸のラベル
datasets: datasets
},
options: {
plugins: {
//responsive: false,
title: {
display: options.title.length > 0,
// タイトルがあれば表示
text: options.title
},
legend: {
// 凡例
//onClick: function () { return false }, //凡例クリック時、何も返さないコード
display: true,
// 表示の有無
position: options.legendPosition,
// 表示位置
labels: {
usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか
}
}
}
}
});

return myPieChart;
}

const label1 = [
{label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]},
{label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]},
{label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000]}
];

const datasets = [
{label: label1[0].label,data: label1[0].data},
{label: label1[1].label,data: label1[1].data},
{label: label1[2].label,data: label1[2].data}
];

//-------------------------------------------------------------
//Bar chart
const barChart = displayChart('myChart1', 'bar', datasets,{
title: 'Bar chart',
usePointStyle: false,
legendPosition: 'top'
});

for (let i=0; i<datasets.length; i++){
datasets[i]["backgroundColor"] = color1[i]; //カラー設定
}

barChart.update(); //更新
//-------------------------------------------------------------

//Pie chart
for (var i = 0; i < 3; i++) {
PieChart = displayChart(`${'myChart'+(i + 2)}`, 'pie', [label1[i]], {
title: label1[i].label,
usePointStyle: true,
legendPosition: 'left'
});

label1[i]["backgroundColor"] = mycolor; //カラー設定
PieChart.update(); //更新
}

//--------------------------------------------------------------------
// ４つのグラフを1つの画像でダウンロードするコード
//--------------------------------------------------------------------
function imageDownload() {
var chartWidth = 350;
var chartHeight = 242;

var imageType = "image/png"
var bufferCanvas = document.createElement("canvas");
bufferCanvas.style.border = "solid 1px red";

bufferCanvas.width = chartWidth * 1.82;
bufferCanvas.height = chartHeight * 2.2;

console.log("canvas size",bufferCanvas.width, bufferCanvas.height);

// bufferCanvas.style.display = "none";

document.querySelector(".console").appendChild(bufferCanvas);

var ctx = bufferCanvas.getContext("2d");

ctx.fillStyle = "rgb(255, 255, 255)"; // 背景色を設定（しない場合は透過）
ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height);

// 各グラフを合成用キャンバスに貼り付け
for (var i = 1; i <= 4; i++) {
ctx.drawImage(
document.getElementById("myChart" + i),
i % 2 == 1 ? 0 : chartWidth, //横幅
i <= 2 ? 0 : chartHeight //高さ
);
}
var imageURL = bufferCanvas.toDataURL(imageType); //ＵＲＬを生成

//------------------------
//リンクを作成
const a = document.createElement("a");
a.style.display = "block";
a.href = imageURL;
a.download = "chart.png";
a.textContent = "画像でダウンロード";

//a.click();

document.querySelector(".console").appendChild(a);
}
//グラフのレンダリングに時間を要するために一定時間経過後に実行
setTimeout(imageDownload, 3000);
//--------------------------------------------------------------------
};
</script>
</body>
</html>

お礼

retorofan さん有り難うございます。
先にせっかく教えてもらった1×3の配置なのに
>それと、配置をCSSで新たに組み変えるのは意味がないので
今までのままのほうがいいです。
何故なら、各キャンバスは見かけの位置でなくて、
オブジェクトとしてアクセス、移動、変更が自在に可能です。
極端に言えば、非表示の場合でも操作できるのですから。
見かけにこだわった私に問題があるのか・・・
web上で教えてもらったコードで再現したところ問題なく出力されました。
多分遅くなると思いますがこれをfilemakerのweb ビューアで表示させイメージを別オブジェクトフィールドに画像として挿入できるように試みてみます。filemakerでは、ビューアで表示されたグラフだけなら印刷できるのですが、他のフィールドを含めた場合難があるので一旦オブジェクトフィールドを使った印刷用レイアウトで実行する必要がある・・・
合成部分まで作っていただき有り難うございました。