我正在使用Chart.js,想将折线图转换为PNG。问题是图像总是以透明背景下载,这不是我所需要的。我尝试了许多选择,但没有任何效果。
还有建议吗?
这是获取ChartJS完全不透明版本的一种方法:
等待图表完全动画化并完成。您可以通过将onAnimationComplete
属性添加到图表中来执行此操作。
在onAnimationComplete
函数中:
drawImage
将ChartJS画布覆盖在白色填充的临时画布上可以这样做:
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.onload=function(){
document.body.appendChild(img);
}
img.src=tcanvas.toDataURL();
}
});
这是示例代码和演示:
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.onload=function(){
document.body.appendChild(img);
}
img.src=tcanvas.toDataURL();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<h4>ChartJS line chart</h4>
<div style="width:30%">
<div>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
<h4>Fully opaque chart as image</h4>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句