wake-up-neo.com

Chart.js-Linie stellt Hintergrundfarbe ein

Ich arbeite mit Chart.js und möchte ein Liniendiagramm in ein PNG-Format konvertieren. Das Problem ist, dass das Bild immer mit einem transparenten Hintergrund heruntergeladen wird, was ich nicht brauche. Ich habe viele Optionen ausprobiert, nichts hat wirklich funktioniert.

Und Vorschläge?

13

So erhalten Sie eine vollständig undurchsichtige Version Ihres ChartJS:

Warten Sie, bis das Diagramm vollständig animiert und vollständig ist. Sie können dies tun, indem Sie dem Diagramm die onAnimationComplete -Eigenschaft hinzufügen.

In der onAnimationComplete-Funktion:

  • Erstellen Sie eine temporäre Arbeitsspeicherfläche im Arbeitsspeicher, die der Größe Ihres Diagramms entspricht.
  • Füllen Sie die temporäre Leinwand mit Weiß
  • drawImage die ChartJS-Leinwand über der weiß gefüllten temporären Leinwand
  • Erstellen Sie ein Bild aus der temporären Leinwand.

So könnte das gemacht werden:

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

Hier ein Beispielcode und eine 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>

4
markE

Hier ist eine Lösung, die perfekt funktioniert, auch beim Speichern in einer Bilddatei (wie png). Ich kopiere dies offensichtlich von @etimberg im 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);
  }
});

Dies sollte vorher Ihr Diagramm in der Quelle sein.

13
Mark

Warum versuchen Sie nicht, css zu verwenden? Ein Canvas-Element ist genau wie ein normales HTML-Element, oder? Sie können also entweder die Hintergrundfarbe festlegen oder mit css den Hintergrund eines Bildes festlegen.

$('#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

Sie können dieses Problem ganz einfach lösen, wenn Sie den Code in chart.js ändern möchten.

In chart.js gibt es eine Funktion namens clear . Sie finden die clear-Funktion, indem Sie nach clearRect suchen. Die Funktion clear wird jedes Mal aufgerufen, wenn chart.js das Diagramm neu zeichnet, also setzen wir den Hintergrund. Direkt unter der Zeile mit clearRect fügen Sie die folgenden Zeilen hinzu.

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