Chart.js 折线图设置背景颜色

我正在使用 Chart.js 并希望将折线图转换为 PNG.问题是图像总是以透明背景下载，这不是我需要的.我尝试了很多选择，但都没有真正奏效.

还有建议?

解决方案

这是获得完全不透明的 ChartJS 版本的一种方法:

等到图表完全动画化并完成.您可以通过将 onAnimationComplete 属性添加到图表来做到这一点.

在onAnimationComplete函数中:

• 创建一个与图表大小相同的内存临时画布.
• 用白色填充临时画布
• drawImage在白色填充的临时画布上的 ChartJS 画布
• 从临时画布创建图像.

可以这样做:

var ctx = document.getElementById("canvas").getContext("2d");window.myLine = new Chart(ctx).Line(lineChartData, {响应式:真实，onAnimationComplete:function(){var tcanvas=document.createElement('canvas');var tctx=tcanvas.getContext('2d');tcanvas.width=ctx.canvas.width;tcanvas.height=ctx.canvas.height;tctx.fillStyle='白色';tctx.fillRect(0,0,tcanvas.width,tcanvas.height);tctx.drawImage(canvas,0,0);var img=新图像()；img.onload=函数(){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 = {标签 : ["一月","二月","三月","四月","五月","六月","七月"],数据集:[{标签:我的第一个数据集"，填充颜​​色: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)",数据:[随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()]},{标签:我的第二个数据集"，填充颜​​色: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)",数据:[随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()]}]}var ctx = document.getElementById("canvas").getContext("2d");window.myLine = new Chart(ctx).Line(lineChartData, {响应式:真实，onAnimationComplete:function(){var tcanvas=document.createElement('canvas');var tctx=tcanvas.getContext('2d');tcanvas.width=ctx.canvas.width;tcanvas.height=ctx.canvas.height;tctx.fillStyle='白色';tctx.fillRect(0,0,tcanvas.width,tcanvas.height);tctx.drawImage(canvas,0,0);var img=新图像()；img.onload=函数(){document.body.appendChild(img);}img.src=tcanvas.toDataURL();}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></脚本><h4>ChartJS 折线图</h4><div style="宽度:30%">
<canvas id="canvas" height="450" width="600"></canvas></div></div><h4>完全不透明的图表作为图像</h4>

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.onload=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.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>