Горизонтальная полоса с несколькими разделами в ChartJs - PullRequest
Новая
       4

Горизонтальная полоса с несколькими разделами в ChartJs

3 голосов
/ 28 января 2020

Я хочу создать горизонтальную гистограмму, которая имеет 3 раздела. Пожалуйста, смотрите ниже для изображения: c

Я уже проделал большую работу (я думаю :)) Я просто пытаюсь выяснить, как организовать наборы данных, чтобы они отображали несколько столбцов и разными цветами, как показано в примере.

До сих пор Javscript: 

        var ctx7 = document.getElementById('myChart7').getContext('2d');
        var myChart7 = new Chart(ctx7, { // eslint-disable-line
            type: 'horizontalBar',
            data: {
                labels: ['2018', '2019'],
                datasets: [{
                    label: '# of Votes',
                    data: [10, 19],
                    backgroundColor: [
                        'rgb(0,51,160)',
                        'rgb(26,121,191)'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            fontColor: 'white',
                            beginAtZero: true,
                            fontSize: 18,
                        },
                        gridLines: {
                            display: false
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false
                        },
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                },
                legend: {
                    display: false
                }
            }
        });

1 Ответ

2 голосов
/ 28 января 2020

Этот тип графика называется «столбец с накоплением» и включен в диаграмму . js samples . Документация вполне понятна.

Вот рабочий пример: 

new Chart(document.getElementById("chart"), {
  type: "horizontalBar",
  data: {
    labels: ["A", "B"],
    datasets: [{
        data: [1, 4],
        backgroundColor: "#0033a0"
      },
      {
        data: [3, 1],
        backgroundColor: "#1a79bf"
      },
      {
        data: [2, 2],
        backgroundColor: "#b2b2b2"
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
...