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,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,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,backgroundColor: 'rgba(255,0.2)',borderColor: 'rgba(255,0.5)',pointBackgroundColor: 'black'

}]

}

});

// save as image

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

canvas.toBlob(function(blob) {

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

});

});

Save