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

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

---

还有建议吗？

这里有一种方法可以获得完全不透明的图表版本：

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();
  }
});

等待图表完全设置动画并完成。您可以通过向图表中添加

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 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）}；
变量lineChartData={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（），随机缩放因子（）]
}
]
}
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（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='white'；
tctx.fillRect（0,0，tcavas.width，tcavas.height）；
tctx.drawImage（画布，0,0）；
var img=新图像（）；
img.onload=函数（）{
文件.正文.附件（img）；
}
img.src=tcanvas.toDataURL（）；
}
});

ChartJS折线图
完全不透明的图表如图
如果您愿意更改chart.js中的代码，您可以非常简单地解决这个问题

chart.js中有一个名为clear的函数。您可以通过搜索clearRect找到clear函数。每次chart.js重绘图表时都会调用clear函数，因此我们将在这里设置背景。在clearRect行的正下方，添加以下行

...
chart.ctx.clearRect(0,0,chart.width,chart.height);

// Add these 3 lines
chart.ctx.rect(0, 0, chart.width, chart.height);
chart.ctx.fillStyle="#fff"; // Put your desired background color here
chart.ctx.fill();
...

你为什么不尝试使用css呢？canvas元素就像普通的HTML元素，对吗？因此，您可以设置它的背景颜色，也可以使用css将它的背景设置为图像

$('#myChart').css('background-color', 'rgba(0, 0, 0, 0)'); // this worked for me but I'm guessing you can set a background image using css like you normally do.

在保存到图像文件（如png）时，这里有一个非常有效的解决方案。我公然抄袭了@etimberg网站上的这篇文章

这应该放在源代码中的图表之前。
对我有用。“我刚刚用叉子叉了叉，就这样做了。”马克，这太不幸了。我会尝试找到更好的解决方案。我在chartjs问题跟踪器上找到了解决方案，但忘了在这里发帖。我现在添加了一个与PNG一起工作的答案！工作起来很有魅力！谢谢@马克，这个解决方案肯定有效。但是，如果在beforeDraw函数中添加console.log语句，我希望您会像我一样看到它被多次调用。也许在绘制每个数据点之前。这让我很烦恼。因此，我不断搜索并拼凑出一个解决方案，用afterRender处理程序“填充不足”矩形，以在只运行一次的代码中获得相同的效果。请参阅：