Chart.js を使用して canvas に描画するグラフは、canvas の中のグラフエリアだけは、
以下 stackoverflow の返答にあるように、描画前に実行する関数プラグインを書き
option の chartArea で backgroundColor を指定すれば、グラフエリアだけは背景色が適用できる。
javascript - Chart area background color chartjs - Stack Overflow
Chart.js プラグインへの登録:beforeDraw (描画前に実行する関数)を記述して
Chart.pluginService.register({ beforeDraw: function(c){ if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) { var ctx = c.chart.ctx; var chartArea = c.chartArea; ctx.save(); ctx.fillStyle = c.config.options.chartArea.backgroundColor; ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); ctx.restore(); } } });
この後で、canvas にグラフを描画する処理で指定する option の中で、chartArea に backgroundColor を指定する。
var options = { responsive: true, title:{ display:true, text:'Chart sample' }, // グラフエリアのオプション chartArea: { backgroundColor: 'rgba(230, 238, 255, 0.6)' }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Days' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Value' }, ticks: { min: 0, max: 100, stepSize: 20 } }] }, }; var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: graph, options: options });
canvas 全体の背景色を指定することをしたい場合。。
Chart.js はbackgrondColor 指定して塗りつぶす fill() fillRectangle() メソッドも組み込まれていないため、
以下のように、csnvas の context への CSS で指定することになる。
var canvas = document.getElementById("myChart"); canvas.style.backgroundColor = "rgba(255, 255, 220, 1)"; var ctx = canvas.getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: graph, options: options });
しかしこれでは、このcanvas画像をダウンロードすれば判るが、
グラフエリアの外側の背景色は透過されたままだ。
外側の背景色を画像への変換(toDataURL()の使用)でも適用させるためには、
この方法ではなくて、上に書いた beforeDraw 関数プラグイン登録の記述で、書くべきだ。
背景色とグラフエリアの両方に各々の背景色を
指定しダウンロード画像にも適用させるには、、
Chart.pluginService.register({ beforeDraw: function(c){ if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) { var ctx = c.chart.ctx; var chartArea = c.chartArea; ctx.fillStyle = "rgba(153, 255, 221, 1)"; // 外側背景色の指定 ctx.fillRect(0, 0, c.chart.width, c.chart.height); // 外側背景色描画 ctx.save(); ctx.fillStyle = c.config.options.chartArea.backgroundColor; ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top); ctx.restore(); } } });
背景色だけを指定する場合は、
Chart.plugins.register({ beforeDraw: function(c){ var ctx = c.chart.ctx; ctx.fillStyle = "rgba(153, 255, 221, 1)"; ctx.fillRect(0, 0, c.chart.width, c.chart.height); } });
ということになる。
すると、canvas から getContext して、new Chart の記述はマニュアルどおり
var canvas = document.getElementById("myChart"); var ctx = canvas.getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: graph, options: options });
canvas 画像ダウンロードは、chrome では以下の方法ができる。IEではダメた。
例)id="createImg" のボタンclick で。
$('#createImg').click(function(){ var png = document.getElementById('myChart').toDataURL(); var a = document.createElement('a'); var e = document.createEvent('MouseEvent'); // 保存するファイル名 a.download = "sample.png"; a.href = png; e.initEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); });