web-dev-qa-db-fra.com

Chart.js line chart set couleur d'arrière-plan

Je travaille avec Chart.js et je souhaite convertir un graphique en courbes en PNG. Le problème est que l'image télécharge toujours avec un arrière-plan transparent, ce qui n'est pas ce dont j'ai besoin. J'ai essayé beaucoup d'options, rien n'a vraiment fonctionné.

Et des suggestions?

javascriptchartschart.js
13
Ghassen Telmoudi

Voici un moyen d'obtenir une version totalement opaque de votre ChartJS:

Attendez que le graphique soit complètement animé et terminé. Vous pouvez le faire en ajoutant la propriété onAnimationComplete au graphique.

Dans la fonction onAnimationComplete:

  • Créez un canevas temporaire en mémoire de taille égale à votre graphique.
  • Remplir la toile temporaire avec du blanc
  • drawImage le canevas ChartJS sur le canevas temporaire blanc
  • Créez une image à partir du canevas temporaire.

Voici comment cela pourrait être fait: 

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();
  }
});

Voici un exemple de code et une démo: 

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>

4
markE

Voici une solution qui fonctionne parfaitement, même lors de l’enregistrement dans un fichier image (comme png). Je suis en train de copier ceci de @etimberg de manière flagrante au chartjs issue tracker .

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

Cela devrait aller avant votre graphique dans la source.

13
Mark

Pourquoi n'essayez-vous pas d'utiliser les CSS? Un élément de toile est comme un élément HTML normal, non? Ainsi, vous pouvez définir sa couleur d'arrière-plan ou définir son arrière-plan sur une image à l'aide de 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.
3
Chillz

Vous pouvez résoudre ce problème très simplement, si vous êtes prêt à changer le code dans chart.js.

Il y a une fonction dans chart.js appelée clear . Vous pouvez trouver la fonction clear en recherchant clearRect . La fonction clear est appelée à chaque fois que chart.js redessine le graphique, c’est pour cela que nous allons définir l’arrière-plan. Juste en dessous de la ligne avec clearRect , ajoutez les lignes suivantes.

...
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();
...
0
jastr