chart.js を使って表示したグラグを画像にして保存します。
Contents
chart.js
chart.js はシンプルで柔軟なグラフを綺麗に描画できる、javascript のチャートライブラリです。
導入からグラフ表示に関してはこちら
画像保存
toBase64Image メソッドを使って canvas に描画したグラフを画像に変換します。
1 |
myChart.toBase64Image() |
実行
1 |
data:image/png;base64,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 |
まとめ
簡単にグラフを画像にすることができました。初期では背景は透過になっていますので、chartArea の backgroundColor を指定することで変更できます。
参考
公式:Chart.js
公式ドキュメント:Chart.js documentation