Chart.js 2.0 radarChart Canvasに任意の画像を表示したい

Question

前提・実現したいこと

Chart.js 2.0を用いてradarChartを表示しています。
Canvasに描画されたradarChartのチャート上や余白に任意の画像を重ねて表示したいと考えております。
canvasの知識が乏しく恐れ入りますが、方法を教えていただければ幸いです。

発生している問題・エラーメッセージ

Canvasに画像を追加するサンプルを参考に追加してもグラフのみで
追加画像が何も表示されません。

該当のソースコード

<canvas id="myChart" width="150" height="150" ></canvas>
<script>
var canvas = document.getElementById("myChart");
ctx = canvas.getContext("2d");
var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: {
    labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
    datasets: [{
        data: [20, 10, 4, 2]
    }]
}
});

var image = new Image();
image.src = 'sampleImg.png';
image.addEventListener('load', function() {
   ctx.drawImage(image, 0, 0, 30, 30);
}, false);

</script>

Comments

[defghi1977]

グラフそのものの出力には成功しているのですね？

[tera_ina]

はい、グラフ自体の出力は問題ありません。表示されます。

Answer 1

Chart.jsの動作サンプルを確認した処, どうやらインタラクティブなグラフを実現するためにcanvas要素の中身を定期的に上書きしているように思えます.従って, あなたが行ったdrawImageはグラフの描画により破棄されているものと思われます.

Chart.jsの内部実装に則した回答ではありませんが,解決策としては次のいずれか考えられます.

• 画像をcanvas要素に描くのではなく, CSSのbackground-imageプロパティ(背景画像)に設定する.

この方法ではグラフ保存時に背景画像をcanvas要素に描き直す必要があります.

• Chart.jsで描いたグラフを別のcanvas要素に転写した上で, drawImageする.

この方法ではChart.jsのインタラクティブ性が犠牲になります.

• コンテキストオブジェクトのclearRectメソッドを上書きし, この中でdrawImageする.

Chart.jsがcanvas要素の内容を書き換える際, まず初めにclearRectメソッドを呼び出している筈なので, そこに独自の描画処理(ここではdrawImageメソッド)をフックします.
この方法はChart.jsの動作を逆手に取っているため, 動作検証にコストがかかります.

NOTE:
もちろんChart.js側に画像の挿入に関わるAPIが備わっていればそれを使うのがベストです.

---

例えば3つめの方法であれば, 次のようにします.

<canvas id="myChart" width="150" height="150" ></canvas>
<script>
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "sampleImg.png";
var oClearRect = ctx.clearRect;//元のclearRect
//Chart.jsがclearRectを呼び出す毎にdrawImageする
ctx.clearRect = function(){
	oClearRect.apply(this, arguments);
	this.drawImage(img, 0, 0, 30, 30);
};

var myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
        datasets: [
            {data: [20, 10, 4, 2]}
        ]
    }
});
</script>

NOTE:
なお, コードの内容を理解できない(動作原理を読み解けない)のであれば, 後々のコードメンテナンスに大きな禍根を残すことになるため避けたほうが無難です.

Comments

[tera_ina]

ご回答頂いた３つ目の方法で実現することができました。
Chart.jsをレスポンシブで利用しているため１，２より
３つ目の案の方が画面サイズに応じた描画座標も設定しやすそうです。
迅速に教えていただき、本当にありがとうございます。

[defghi1977]

JavaScript特有の対処策なので, コメントは多めに残しておくことをおすすめします. (何もしないと引き継ぎで死にます)

[tera_ina]

ご助言ありがとうございます。NOTEに記載頂いた件については、動作原理はお陰様で理解することができました。コメントをしっかり残す件アドバイスありがとうございます。細かく記載したいと思います。