Гистограммы с накоплением в chart.js с различными значениями в стеках - PullRequest
Новая
       49

Гистограммы с накоплением в chart.js с различными значениями в стеках

0 голосов
/ 20 ноября 2018

Я хочу создать график стека примерно так:

Примечание: каждый стек имеет различное значение

enter image description here

Возможно ли это с диаграммой JS? Если да, то как должны выглядеть мои данные?

Я пробовал это: 

var data = {
    labels: ["2018", "2019"], //Want "value 1,2,3 for 2018 and value 4,5,6 for 2019"
    datasets: [
        {
            label: "Harpo",
            fillColor: "blue",
            data: []  // What should i use here 
        },
        {
            label: "Chico",
            fillColor: "red",
            data: []  // What should i use here
        }
    ]
};

Но это не то, что я хочу.

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 20 ноября 2018

для того, чтобы иметь стек из 3 баров,
вам понадобится 3 datasets.

, чтобы иметь разные цвета, используйте массив для backgroundColor.

см. Следующий рабочий фрагмент ... 

$(document).ready(function() {
  new Chart(document.getElementById("myChart").getContext("2d"), {
    type: "bar",
    data: {
      labels: ["2018", "2019"],
      datasets: [
        {
            backgroundColor: ["#673AB7", "#90A4AE"],
            fillColor: "#000000",
            data: [1, 4]
        },
        {
            backgroundColor: ["#E1BEE7", "#0D47A1"],
            data: [2, 5]
        },
        {
            backgroundColor: ["#BA68C8", "#455A64"],
            data: [3, 6]
        }
      ]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes:[{
          stacked: true
        }],
        yAxes:[{
          stacked: true
        }],
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
...