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

Question

我正在使用Chart.js，并希望将一张线状图转换为PNG格式。问题在于，该图像总是以透明的背景下载，这不是我想要的。我尝试了很多选项，但都没有真正起作用。

有什么建议吗？

- HXH

Answer 1

这里有一个完美运作的解决方案，即使保存为图像文件（如png）也可以。我从@etimberg在chartjs问题追踪器中公开抄袭了这个解决方案。

Chart.plugins.register({
  beforeDraw: function(chartInstance) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
});

这段内容应该在你的源代码中图表之前显示。

- Mark

---

非常好用！谢谢！ - FizxMike

@Mark，这个解决方案肯定可行。但是如果你在 beforeDraw 函数中添加了一个 console.log 语句，我期望你会像我一样看到它被调用了很多次。也许是在每个数据点绘制之前。那让我感到不舒服。所以我继续搜索，并通过一个 afterRender 处理程序拼凑出了一个“未填充”矩形的解决方案，以在只运行一次的代码中获得相同的效果。 请参见：https://dev59.com/FFcP5IYBdhLWcg3w5d_Q#53946660 - Anne Gunn

Answer 2

这里有一种获得ChartJS完全不透明版本的方法：

等图表完全展示和动画结束。您可以通过将onAnimationComplete属性添加到图表中来实现此目的。

在onAnimationComplete函数中：

• 创建与您的图表大小相同的内存临时画布。
• 用白色填充temp画布。
• drawImage ChartJS画布覆盖在填充了白色的temp画布上。
• 从temp画布中创建图像。

以下是如何完成这项工作的示例：

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>

- markE

Answer 3

为什么不尝试使用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.

- Chillz

---

@Mark 很不幸。我会尝试找到更好的解决方案。 - Chillz

我在chartjs的问题跟踪器上找到了解决方案，但是忘记在这里发布回复了。现在我已经添加了一个答案，可以使用png格式的图片！ - Mark

Answer 4

如果你愿意更改chart.js中的代码，那么你可以很容易地解决这个问题。

在chart.js中有一个名为clear的函数。你可以通过搜索clearRect来找到它。每次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();
...

- jastr

---

对我来说很有效。我只是fork了nchart并且按照这个做了。 - Cameron A. Ellis