html5图表背景不显示不出来,html5-canvas – 如何使用blob和filesaver将Chart JS图表保存为没有黑色背景的图像？...

如果你想要一个自定义的背景颜色,你必须用你喜欢的颜色绘制背景,你可以这样做,像这样…

var backgroundColor = 'white';

Chart.plugins.register({

beforeDraw: function(c) {

var ctx = c.chart.ctx;

ctx.fillStyle = backgroundColor;

ctx.fillRect(0, 0, c.chart.width, c.chart.height);

}

});

DEMO

// draw background

var backgroundColor = 'white';

Chart.plugins.register({

beforeDraw: function(c) {

var ctx = c.chart.ctx;

ctx.fillStyle = backgroundColor;

ctx.fillRect(0, 0, c.chart.width, c.chart.height);

}

});

// chart

var canvas = $('#NoBidsChart').get(0);

var myChart = new Chart(canvas, {

type: 'line',

data: {

labels: [1, 2, 3, 4, 5],

datasets: [{

label: 'Line Chart',

data: [1, 2, 3, 4, 5],

backgroundColor: 'rgba(255, 0, 0, 0.2)',

borderColor: 'rgba(255, 0, 0, 0.5)',

pointBackgroundColor: 'black'

}]

}

});

// save as image

$('#save').click(function() {

canvas.toBlob(function(blob) {

saveAs(blob, "pretty image.png");

});

});

Save