web-dev-qa-db-fra.com

Couleur de fond de la carte

J'ai un problème avec le graphique js, je veux colorier la zone graphique comme l'image ci-dessus enter image description here

J'essaie de trouver la configuration de charJs Docs , mais rien ne correspond. son possible ou non de changer la couleur de fond de la zone de graphique? si possible quelqu'un peut m'aider?

Html

<canvas id="barChart" width="600" height="300"></canvas>

Javascript

var ctx = document.getElementById("barChart");
var barChart = new Chart(ctx,{
  type: 'bar',
  data: {
    labels:["Label1","Label2","Label3","Label4"],
    borderColor : "#fffff",
    datasets: [
      {
        data: ["2","3","1","4"],
        borderColor : "#fff",
        borderWidth : "3",
        hoverBorderColor : "#000",
        backgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5" 
        ],
        hoverBackgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5"
        ]
      }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks:{
          min : 0,
          stepSize : 1,
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#000",
          lineWidth:2,
          zeroLineColor :"#000",
          zeroLineWidth : 2
        },
        stacked: true
      }],
      xAxes: [{
        ticks:{
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#fff",
          lineWidth:2
        }
      }]
    },
    responsive:false
  }
});

Voici mon code actuel jsFiddle

afin que tout le monde puisse essayer de trouver une solution. Merci de votre aide.

javascriptjquerycanvashtml5-canvaschart.js
25
Pajar Fathurrahman

Il n'y a pas de méthode intégrée pour changer la couleur de fond, mais vous pouvez utiliser CSS. JSFiddle .

ctx.style.backgroundColor = 'rgba(255,0,0,255)';

[~ # ~] éditer [~ # ~]

Si vous voulez remplir exactement la zone du graphique et pas une division entière, vous pouvez écrire votre propre plugin chart.js. Essayez-le sur JSFiddle .

        Chart.pluginService.register({
            beforeDraw: function (chart, easing) {
                if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                    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();
                }
            }
        });

        var config = {
  type: 'bar',
  data: {
    labels:["Label1","Label2","Label3","Label4"],
    borderColor : "#fffff",
    datasets: [
      {
        data: ["2","3","1","4"],
        borderColor : "#fff",
        borderWidth : "3",
        hoverBorderColor : "#000",
        backgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5" 
        ],
        hoverBackgroundColor: [
          "#f38b4a",
          "#56d798",
          "#ff8397",
          "#6970d5"
        ]
      }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks:{
          min : 0,
          stepSize : 1,
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#000",
          lineWidth:2,
          zeroLineColor :"#000",
          zeroLineWidth : 2
        },
        stacked: true
      }],
      xAxes: [{
        ticks:{
          fontColor : "#000",
          fontSize : 14
        },
        gridLines:{
          color: "#fff",
          lineWidth:2
        }
      }]
    },
    responsive:false,
    chartArea: {
        backgroundColor: 'rgba(251, 85, 85, 0.4)'
    }
  }
};

        var ctx = document.getElementById("barChart").getContext("2d");
        new Chart(ctx, config);
40
user6586783

Le fond de la toile est transparent par définition, comme tout élément, il vous suffit donc de définir la couleur de fond de votre toile. Par exemple, vous aurez besoin de ce CSS:

JSFiddle

canvas#barChart {
  background-color: #f00;
}

ou HTML en ligne, pour clarifier l'idée:

<canvas id="barChart" width="600" height="300" style="background-color: #f00;"></canvas>
0
dmonti