javascript - ChartJS : Horizontal Bar with multiple datasets not showing Bars

Question

我有单杠比较房间和客人的目标与实现。Rooms 有 3 个数据值(Available、Budget、Actual)，而 Guests 只有 2 个(Budget、Actual)。

下面是生成图表的代码:

 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] 添加到 Guests Available 数据值时显示；但是没有像房间这样的客人数据。

这是 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>