Chart.js 折线图设置背景色 [英] Chart.js line chart set background color

问题描述

我正在使用 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=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 = {标签:[一月"、二月"、三月"、四月"、五月"、六月"、七月"]、数据集:[{标签:我的第一个数据集"，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)",数据:[randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]},{标签:我的第二个数据集"，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)",数据:[randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]}]}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=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 折线图</h4><div style="width:30%"><div><canvas id="canvas" height="450" width="600"></canvas>

<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>

这篇关于Chart.js 折线图设置背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！