Chart.js折线图设置背景色

Question

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

和建议？

Answer 1

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

等到图表完全动画出来并完成。您可以通过在图表中添加 onAnimationComplete 属性来实现。

在onAnimationComplete函数中：

创建一个与您的图表大小相同的临时内存canvas。
用白色填充温度canvas
drawImage ChartJS canvas 白色填充温度 canvas
从临时创建图像 canvas。

可以这样做：

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>

Answer 2

如果您愿意更改 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();
...

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.

Answer 4

这是一个完美的解决方案，在保存到图像文件（如 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);
  }
});

这应该放在之前您在源代码中的图表。

Chart.js折线图设置背景色

Chart.js line chart set background color

javascript

charts

chart.js