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

Chart.js line chart set background color

提问by Ghassen Telmoudi

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.

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

And suggestions?

和建议？

采纳答案by markE

Here's one way to get a fully-opaque version of your ChartJS:

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

Wait until the chart is fully animated out and complete. You can do this by adding the onAnimationCompleteproperty to the chart.

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

In the onAnimationCompletefunction:

在onAnimationComplete函数中：

• Create an in-memory temporary canvas of equal size as your chart.
• Fill the temp canvas with white
• drawImagethe ChartJS canvas over the white-filled temp canvas
• Create an image from the temp canvas.

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

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>

回答by Mark

Here's a solution that works perfectly, also when saving to an image file (like png). I'm blatantly copying this from @etimberg at the chartjs issue tracker.

这是一个完美的解决方案，在保存到图像文件（如 png）时也是如此。我在chartjs issue tracker公然从@etimberg 复制了这个。

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

This should go beforeyour chart in the source.

这应该在源中的图表之前。

回答by Chillz

Why don't you try to use css? A canvas element is just like a normal HTML element right? So you can either set it's background colour or set it's background to an image using css.

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

回答by jastr

You can solve this pretty simply, if you're willing to change the code in chart.js.

如果您愿意更改 chart.js 中的代码，您可以非常简单地解决这个问题。

There's a function in chart.js called clear. You can find the clear function by searching for clearRect. The clearfunction is called every time chart.js redraws the chart, so that's where we'll set the background. Right below the line with clearRect, add the following lines.

chart.js 中有一个名为clear的函数。您可以通过搜索clearRect找到 clear 函数。该明确的函数被调用每次重绘chart.js之图表，所以这就是我们要设置的背景。在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();
...