Graphique en ligne Chart.js défini la couleur d'arrière-plan

Je travaille avec Chart.js et que vous voulez convertir une ligne graphique pour un PNG. Le problème est que l'image se télécharge toujours avec un fond transparent, ce qui n'est pas ce dont j'ai besoin. J'ai essayé plusieurs options, rien n'a vraiment fonctionné.

Et suggestions?

source d'informationauteur Ghassen Telmoudi

  1. 10

    Voici une solution qui fonctionne parfaitement, également lors de l'enregistrement d'un fichier image (comme le png). Je suis ouvertement la copie de ce de @etimberg à la 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 diagramme de la source.

  2. 3

    Pourquoi n'essayez-vous pas à utiliser les css? Un élément canvas est juste comme un simple élément HTML à droite? Ainsi, vous pouvez définir la couleur d'arrière-plan ou définir le fond d'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. 0

    Vous pouvez résoudre ce problème assez simplement, si vous êtes prêt à modifier le code de la chart.js.

    Il existe une fonction dans chart.js appelé clair. Vous pouvez trouver la fonction effacer par la recherche de clearRect. Le clair fonction est appelée à chaque fois chart.js redessine le graphique, c'est donc ici que nous allons définir l'arrière-plan. Juste en dessous de la ligne avec clearRectajoutez 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();
...