时间戳

首页 > 解决方案 > ChartJS：具有多个数据集的水平条不显示条

javascript - ChartJS：具有多个数据集的水平条不显示条

问题描述

我有单杠比较房间和客人的目标与实现。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]到可用客人数据值时显示；但是，对于客房之类的客人，没有此类数据。

这是 JSFiddle ( https://jsfiddle.net/kingBethal/vtf17k84/8/ )。

标签： javascriptchartschart.js

解决方案

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>

推荐阅读