Chart.js 折线图设置背景颜色_前端问题-得得之家

本文介绍了Chart.js 折线图设置背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 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=新图像()；img.onload=函数(){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 = {标签 : ["一月","二月","三月","四月","五月","六月","七月"],数据集:[{标签:我的第一个数据集"，填充颜色: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)",数据:[随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()]},{标签:我的第二个数据集"，填充颜色: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)",数据:[随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()，随机缩放因子()]}]}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=新图像()；img.onload=函数(){document.body.appendChild(img);}img.src=tcanvas.toDataURL();}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></脚本><h4>ChartJS 折线图</h4><div style="宽度:30%"><canvas id="canvas" height="450" width="600"></canvas></div></div><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 折线图设置背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

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

问题描述

相关文档推荐