ChartJS: горизонтальная полоса с несколькими наборами данных, не показывающая столбцы - PullRequest
Новая
       8

ChartJS: горизонтальная полоса с несколькими наборами данных, не показывающая столбцы

0 голосов
/ 06 сентября 2018

У меня есть горизонтальная полоса, сравнивающая цель комнат и гостей с достигнутой. В номерах имеется 3 значения данных (Доступно, Бюджет, Факт), а в Гостях - только 2 (Бюджет, Факт).

Ниже код генерирует диаграмму: 

 data = [{
        label: 'Available',
        backgroundColor: '#3366ff',
        data: [5580]
    }, {
        label: 'Budget',
        backgroundColor: '#009999',
        data: [5000, 6500]
    }, {
        label: 'Actual',
        backgroundColor: '#92d400',
        data: [5200, 7245]
    }];

 var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Rooms", "Guests"],
        datasets: data
    }
}

Проблема с указанным кодом: не отображается панель номера бюджета.

Отображается только когда я добавляю [5580,0] к значению Доступные гости; Однако для таких гостей, как Номера, таких данных нет.

Вот JSFiddle (https://jsfiddle.net/kingBethal/vtf17k84/8/).

1 Ответ

0 голосов
/ 06 сентября 2018

5000 - это самое низкое значение в вашем наборе данных, и Chart.js создает его масштаб, начиная с 5000:

enter image description here

Установите для свойства beginAtZero значение true, и вы увидите ожидаемый бар: 

let data = [{
  label: 'Available',
  backgroundColor: '#3366ff',
  data: [5580]
}, {
  label: 'Budget',
  backgroundColor: '#009999',
  data: [5000, 6500]
}, {
  label: 'Actual',
  backgroundColor: '#92d400',
  data: [5200, 7245]
}];

let myChart = new Chart(document.getElementById('chart'), {
  type: 'horizontalBar',
  data: {
    labels: ["Rooms", "Guests"],
    datasets: data
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>
...