完全フリーで使えるChart.jsでチャートを画像ダウンロードするように設置してビジネスライクに使える様にしたと思ったら、ダウンロードした画像の背景色が黒くなってしまうという問題点を発見。
WEBサービスにチャートを表示して見た目も含め、レポート資料作成の利便性をアップさせるのは、今時のセオリーなので、その中で機能豊富で完全フリーで使えるChart.jsは非常に便利なライブラリとして利用できます。
ちょっと調べてみたら、この事象の解決方法があまりGoogle検索でヒットしなかったので、少し手こずりましたが、深く調査してくれているサイトがあったので、リンクを貼っておきます。
http://oboe2uran.hatenablog.com/entry/2018/01/27/181126
ちなみに、今回の解決方法はこのサイトの中にあるシンプル対応法の一つを参考にさせていただきました。
チャートを画像ダウンロードする方法
色々なサイトで書かれているのでググればすぐにでてきますが、非常に簡単なので、やり方を掲載しておきます。
WEBページで表現されるグラフデータは、SVG、Canvasのどちらかの形式が多いです。
サーバー画像表示型は、jpegやpng画像になっているものもありますが、その場合は、その画像のままダウンロードすればいいので、今回は、svgとcanvasをpngやjpeg形式でダウンロードする方法です。
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var a = document.createElement("a");
a.type = "application/octet-stream";
a.download = "image.png";
a.href = canvas.toDataURL("image/png");
a.textContent = "Download";
document.body.appendChild(a);
上記プログラムをhtmlかjsファイルに記述することで、body最下部に「Download」ボタン（リンク）が表示されるので、そのリンクをクリックすることでpng画像ファイルがダウンロードすることができるようになります。
非常にシンプルな方法でダウンロード可能なので、それぞれの環境に適宜変更してご使用ください。
事象確認
これは、このChart.jsライブラリのデフォルト値として、チャート背景色が"rgba(0,0,0,0.1)"として半透明設定されていることが原因で、背景白色のブラウザで見ていると何も気がつかないのですが、ダウンロードしてみると、黒の半透明が表示されて、おかしな結果になってしまうという事象です。
まず、基本となるチャートは以下です。
これを普通にダウンロードしてみると、以下の様になります。
画像ファイルを画像編集アプリで読み込む時に、アプリによっては、デフォルトで背景が白の場合はいいのですが、macのプレビューアプリなどでは、確実に黒背景になってしまいます。
なんとも気持ち悪いので、背景色を白にすればいいだけなんですが、Chart.jsはそれがなかなか難しいという現実がわかりました。
解決方法
optionsなどの設定で簡単に行えないのですが、Chart.js自体にはその部分にアタッチできるようです。
Chartライブラリが読み込まれている状態で以下のコードを実行することで、背景画像を設定できるようになります。
Chart.plugins.register({
beforeDraw: function(c){
var ctx = c.chart.ctx;
ctx.fillStyle = rgba(255,255,255,1);
ctx.fillRect(0, 0, c.chart.width, c.chart.height);
}
});
canvasタグでCSSにいくら記述しても、まったく反映されずにかなり時間を費やしてしまいましたが、上記コードで一発OKになりました。
カラー変更を簡単にできるように、関数化しておいても便利でいいかもしれません。
それにしても、Chart.pluginの領域ということは完全に外部モジュール操作扱いですね。
ひとまずこれで仕事も前進です。
