webentwicklung-frage-antwort-db.com.de

Wie speichere ich Chart JS Charts als Bild ohne schwarzen Hintergrund mit Blobs und Filesaver?

$("#NoBidsChart").get(0).toBlob(function(value) {
    saveAs(value, "Summary.jpg");
});

Hier verwende ich Chart JS (v2.5.0) zum Rendern von Diagrammen. Wenn ich versuche, die Diagramme mit Canvas to Blob Converter und filesaver.js zu exportieren, erhalte ich den schwarzen Hintergrund. Wie bekomme ich das Bild mit einer benutzerdefinierten Hintergrundfarbe (vorzugsweise Weiß)?

7
user7932844

Wenn Sie eine benutzerdefinierte Hintergrundfarbe wünschen, müssen Sie einen Hintergrund mit Ihrer bevorzugten Farbe zeichnen, und Sie können dies wie folgt tun ...

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

DEMO

// draw background
var backgroundColor = 'white';
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas, {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [{
            label: 'Line Chart',
            data: [1, 2, 3, 4, 5],
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgba(255, 0, 0, 0.5)',
            pointBackgroundColor: 'black'
        }]
    }
});

// save as image
$('#save').click(function() {
    canvas.toBlob(function(blob) {
        saveAs(blob, "pretty image.png");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="save">Save</button>
<canvas id="NoBidsChart"></canvas>

10
ɢʀᴜɴᴛ

Wie ich in meinem Kommentar zu der akzeptierten Antwort feststellte, störte es mich, dass das beforeDraw-Ereignis dazu führt, dass der fillRect-Code mehrmals aufgerufen wird. (Einmal pro Datenpunkt, soweit ich sehen kann.)

Aber ich konnte diesen Ansatz nicht erreichen, wenn ich bei einem anderen Ereignis angerufen wurde. Ich habe jedoch nur den in: https://stackoverflow.com/a/50126796/165164 beschriebenen Codierungsansatz verwendet und ihn in den Code gesteckt, der für das afterRender-Ereignis registriert ist, und macht genau das, was ich möchte: einmal ausführen und lass den Hintergrund weiß.

Chart.plugins.register({
    afterRender: function(c) {
        console.log("afterRender called");
        var ctx = c.chart.ctx;
        ctx.save();
        // This line is apparently essential to getting the
        // fill to go behind the drawn graph, not on top of it.
        // Technique is taken from:
        // https://stackoverflow.com/a/50126796/165164
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
        ctx.restore();
    }
});

Bitte besuchen Sie (und stimmen Sie ab) die verknüpfte Antwort auf die andere veröffentlichte Frage. 

1
Anne Gunn