以前に紹介した、ブラウザ上で簡単にグラフが作れるjQueryプラグインの「Chart.js」ですが、今回はそのChart.jsで作成したグラフを画像にする方法を紹介します。
前回の記事はコチラ
簡単にグラフを作れるのはいいものの、そのグラフをダウンロードして保存したいという場面もあると思います。
Chart.jsで作成したグラフを画像で保存する方法
まずは前回のおさらいですが、下記のコードでグラフを作成します。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<script>
$(document).ready(function(){
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['4月', '5月', '6月'],
datasets: [{
label: 'Male',
data: [8, 5, 3],
backgroundColor: "rgba(65,105,225,0.4)"
}, {
label: 'Female',
data: [2, 10, 8],
backgroundColor: "rgba(255,105,180,0.4)"
}]
}
});
});
</script>
<body>
<canvas id="myChart"></canvas>
</body>
</html>ボタンをクリックしたときに画像に変換する方法
まずは、新しくボタンを作成し、そのボタンをクリックした時にグラフを画像に変換する方法です。
まずは、表示用の空のimgタグと、ボタンを用意します。
<input type="button" id="btnToPicture" value="画像変換" />
<img id="imgBase64" />次に、ボタンを押したときにグラフを画像に変換してimgタグに表示する処理を記載します。
画像はBase64形式に変換しますが、主に二通の方法があります。
方法①
canvas要素のtoDataURLを使用する方法です。
var ctx = $("#myChart")[0];
$("#imgBase64").attr("src", ctx.toDataURL("image/png"));ポイントとしては、jQueryオブジェクトからDOMオブジェクトへの変換のために[0]という添え字を使用している点です。
一行目でjQueryを使わない場合は下記の通りとなります。
var ctx = document.getElementById("myChart");
$("#imgBase64").attr("src", ctx.toDataURL("image/png"));方法②
canvas要素の toBase64Image を使用する方法です。
var image = $("#myChart").toBase64Image();
$("#imgBase64").attr("src", image);全体のコードは下記の通りです。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<script>
$(document).ready(function(){
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['4月', '5月', '6月'],
datasets: [{
label: 'Male',
data: [8, 5, 3],
backgroundColor: "rgba(65,105,225,0.4)"
}, {
label: 'Female',
data: [2, 10, 8],
backgroundColor: "rgba(255,105,180,0.4)"
}]
}
});
$("#btnToPicture").click(function(){
var ctx = $("#myChart")[0];
$("#imgBase64").attr("src", ctx.toDataURL("image/png"));
});
$("#btnToPicture2").click(function(){
var image = $("#myChart").toBase64Image();
$("#imgBase64").attr("src", image);
});
});
</script>
<body>
<canvas id="myChart"></canvas>
<input type="button" id="btnToPicture" value="画像変換 toDataURLを使用" />
<input type="button" id="btnToPicture2" value="画像変換 toBase64Imageを使用" />
<img id="imgBase64" />
</body>
</html>初期表示時に画像に変換する方法
初期表示時に表示する場合は、グラフの描画が終わってから画像に変換しないといけません。
グラフ描画の処理に下記を追加します。
options: {
animation: {
onComplete: function(animation){
var ctx = $("#myChart")[0];
$("#imgBase64").attr("src", ctx.toDataURL("image/png"));
}
}
}オプションでanimationを指定し、onComplete内にグラフの描画が終わった後の処理を書きます。onCompleteの中は、ボタンクリックで画像を出力した時と同じです。
全体では下記の通りとなります。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>
<script>
$(document).ready(function(){
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['4月', '5月', '6月'],
datasets: [{
label: 'Male',
data: [8, 5, 3],
backgroundColor: "rgba(65,105,225,0.4)"
}, {
label: 'Female',
data: [2, 10, 8],
backgroundColor: "rgba(255,105,180,0.4)"
}]
},
options: {
animation: {
onComplete: function(animation){
var ctx = $("#myChart")[0];
$("#imgBase64").attr("src", ctx.toDataURL("image/png"));
}
}
}
});
$("#btnToPicture").click(function(){
var ctx = $("#myChart")[0];
$("#imgBase64").attr("src", ctx.toDataURL("image/png"));
});
$("#btnToPicture2").click(function(){
var image = $("#myChart").toBase64Image();
$("#imgBase64").attr("src", image);
});
});
</script>
<body>
<canvas id="myChart"></canvas>
<img id="imgBase64" />
</body>
</html>
コメント