La couleur de fond de la ligne de graphiques dans chart.js

Je voudrais changer la couleur de fond de la ligne graphique produit par chart.js. Il ne semble pas être une option pour cela, et la documentation n'est pas de l'aide. Une vaste recherche sur l'interweb a donné aucun résultat. Est-ce possible?

Je dois avouer que je ne connais pas vraiment sur le HTML5 canvas, donc je suis un peu en difficulté!

qui plugin que vous utilisez pour les cartes??
double possible de stackoverflow.com/questions/30464750/...
Nan Regis, c'est une autre question.

OriginalL'auteur serlingpa | 2016-05-10

  1. 22

    Avec v2.1 de Chart.js vous pouvez écrire votre propre plugin pour ce faire

    Aperçu

    La couleur de fond de la ligne de graphiques dans chart.js

    Script

    Chart.pluginService.register({
    beforeDraw: function (chart, easing) {
        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
            var helpers = Chart.helpers;
            var ctx = chart.chart.ctx;
            var chartArea = chart.chartArea;

            ctx.save();
            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});

    et puis

    ...
options: {
    chartArea: {
        backgroundColor: 'rgba(251, 85, 85, 0.4)'
    }
}
...

    Violon http://jsfiddle.net/rrcd60y0/

    Merci pour cette super réponse!
    Merci!!!! Cela m'a donné l'idée que je devais dessiner une alternance de colonne de couleurs d'arrière-plan pour un graphique!
    Il ressemble à l'arrière-plan rouge est dessiné en avant de la ligne, même avec le "beforeDraw". Est-ce elle, ou est-il juste un peu de gris?
    Salut! Cela fonctionne très bien, mais est-il possible d'avoir différentes colonnes de la couleur dans le fond du graphique à l'aide de ce plug-in? J'ai essayé d'ajouter plus de couleurs à la "backgroundColor" option en la transformant en un tableau, mais il ne fonctionne pas.

    OriginalL'auteur potatopeelings

  2. 3

    Je ne suis pas sûr de ce que tu veux dire par "la couleur d'arrière-plan de la zone principale du graphe qui n'est pas occupée avec la ligne graphique", mais vous pouvez définir la couleur d'arrière-plan de la toile via CSS:

    #myChart {
  background-color: #666;
}

    Regardez cette violon pour voir comment il affecte le graphique.

    Cela permettra de définir l'arrière-plan pour l'ensemble de la toile, si vous souhaitez uniquement pour la partie intérieure, découvrez potatopeelings solution.

    Cela ne fonctionne pas, lorsque vous souhaitez enregistrer un PNG de la carte, puisque la toile est transparent.

    OriginalL'auteur Linus

  3. 1

    Juste pour aider les autres qui pensent à la façon d'ajouter plusieurs couleurs d'arrière-plan:
    J'ai modifié un peu @potatopeelings réponse. J'ai d'abord vérifié le nombre de colonnes il y a

    var columnCount = chart.data.datasets[0].data.length;
var width = chartArea.right - chartArea.left;
var columnWidth = width/columnCount;

    et puis remplissez tous les autres avec la couleur de fond

    while (startPoint < chartArea.right) {
    ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
    startPoint += columnWidth * 2;
}

    Pour mon graphique cela fonctionne mieux mais pour cela, la colonne de juillet est pour une raison qu'une partie. Ne savent pas comment le résoudre, mais nous espérons que vous pouvez obtenir de l'idée à partir d'ici.

    http://jsfiddle.net/e7oy6yk6/2

    OriginalL'auteur niksi

  4. 0

    Essayez de faire cela:

    var ctx = $("#myChart");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {backgroundColor:'rgb(10,10,10)'}
});
    Des excuses, peut-être que je n'étais pas clair. Je sais comment changer la zone qui représente les données, mais je voudrais changer la couleur de fond de la zone principale du graphe qui n'est pas occupée avec la ligne graphique. Pas exactement sûr de savoir comment faire clair...peut-être que je devrais poster une photo.
    Oui @serlingpa merci de ne poster une photo de ce que sont exactement ce que vous faites allusion. Je ne suis pas très clair encore.
    Ne peux pas vraiment, puisque je n'ai pas un graphique montrant la façon dont je le voudrais!
    Si je comprends correctement, vous pouvez peut-être essayer avec une combinaison de mon Niall la réponse de ma réponse. Dans une partie que vous voulez donner une bonne couleur de fond de l'aire sous la ligne, et d'autre part vous voulez donner une couleur de fond pour le reste du graphe.

    OriginalL'auteur Santiago Bendavid