ChartJS：具有多个数据集的水平条未显示条

Question

我有单杠比较“客房和客人”目标与达成的目标。 房间有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/）。

Answer 1

5000是数据集中的最小值，Chart.js正在创建从5000开始的刻度：

将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>