I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image always downloads with a transparent background, which is not what I need. I tried many options, nothing really worked.
And suggestions?
解决方案
Here's one way to get a fully-opaque version of your ChartJS:
Wait until the chart is fully animated out and complete. You can do this by adding the onAnimationComplete property to the chart.
In the onAnimationComplete function:
Create an in-memory temporary canvas of equal size as your chart.
Fill the temp canvas with white
drawImage the ChartJS canvas over the white-filled temp canvas
Create an image from the temp canvas.
Here's how that might be done:
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
onAnimationComplete:function(){
var tcanvas=document.createElement('canvas');
var tctx=tcanvas.getContext('2d');
tcanvas.width=ctx.canvas.width;
tcanvas.height=ctx.canvas.height;
tctx.fillStyle='white';
tctx.fillRect(0,0,tcanvas.width,tcanvas.height);
tctx.drawImage(canvas,0,0);
var img=new Image();
img.οnlοad=function(){
document.body.appendChild(img);
}
img.src=tcanvas.toDataURL();
}
});
Here's example code and a Demo:
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var randomColorFactor = function(){ return Math.round(Math.random()*255)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
onAnimationComplete:function(){
var tcanvas=document.createElement('canvas');
var tctx=tcanvas.getContext('2d');
tcanvas.width=ctx.canvas.width;
tcanvas.height=ctx.canvas.height;
tctx.fillStyle='white';
tctx.fillRect(0,0,tcanvas.width,tcanvas.height);
tctx.drawImage(canvas,0,0);
var img=new Image();
img.οnlοad=function(){
document.body.appendChild(img);
}
img.src=tcanvas.toDataURL();
}
});
