web-dev-qa-db-fra.com

Chartjs v2.0: histogramme empilé

J'ai besoin d'un graphique comme celui-ci:

Example Chart

Je trouve cet exemple mais il utilise l'ancienne version de ChartJs. J'essaye en v2.0 mais je ne comprends pas.

Quelqu'un peut-il poster un exemple?

chart.js
34
drinor

Avec v2.1.x, vous pouvez y parvenir en utilisant l’option stacked

...
options: {
    scales:{
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
        stacked: true
        }]
    }
}
...

extrait de pile

var config = {
  type: 'bar',
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      type: 'line',
      label: 'Dataset 2',
      data: [-65, -10, -80, -81, -56, -85, 40],
      borderColor: 'black',
      fill: false
    }, {
      type: 'bar',
      label: 'Dataset 1',
      backgroundColor: "red",
      data: [65, 0, 80, 81, 56, 85, 40],
    }, {
      type: 'bar',
      label: 'Dataset 3',
      backgroundColor: "blue",
      data: [-65, 0, -80, -81, -56, -85, -40]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
46
potatopeelings

Après avoir joué pour toujours, je me suis enfin mis au travail, voici un échantillon. Quelqu'un s'il vous plaît mettre à jour la documentation!

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes 1',
        data: [10, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)',
          'rgba(255, 99, 132, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)',
          'rgba(255,99,132,1)'
        ],
        borderWidth: 2
      },
      {
        label: '# of Votes 2',
        data: [15, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 2
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]

    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>
36
Hein du Plessis