Chart.js 中的水平条形图

我正在尝试使用 Chart.js 2.3.0 绘制水平条形图 -

 var MeSeContext = document.getElementById("MeSeStatusCanvas").getContext("2d");
    var MeSeData = {
        labels: [
            "ME",
            "SE"
        ],
        datasets: [
            {
                label: "Test",
                data: [100, 75],
                backgroundColor: ["#669911", "#119966" ],
                hoverBackgroundColor: ["#66A2EB", "#FCCE56"]
            }]
    };

var MeSeChart = new Chart(MeSeContext, {
    type: 'horizontalBar',
    data: MeSeData,
    options: {
        scales: {
            yAxes: [{
                stacked: true
            }]
        }

    }
});

但它只显示一个栏。我在这里错过了什么？

您只能看到一张图表，因为数据的最低值 (75 here) 是标度的左极限。

如下面的代码结果屏幕截图所示，如果将鼠标悬停在秤上，您仍然可以看到关联的数据，这意味着它就在这里。

您有两种方法可以解决此问题：

• Set the minxScale 的属性勾选您想要的值（当然足以看到它）：

  var MeSeChart = new Chart(MeSeContext, {
      type: 'horizontalBar',
      data: MeSeData,
      options: {
          scales: {
              xAxes: [{
                  ticks: {
                      min: 60 // Edit the value according to what you need
                  }
              }],
              yAxes: [{
                  stacked: true
              }]
          }
      }
  });
  

  您可以使用以下命令查看结果min设置为 60在这个jsFiddle上 https://jsfiddle.net/4r26box7/ :

• Set the beginAtZero财产给true，与设置相同min to 0 :

  xAxes: [{
      ticks: {
          beginAtZero: true
      }
  }],
  

  您可以使用以下命令查看结果beginAtZero属性设置为true 在这个jsFiddle上 https://jsfiddle.net/4r26box7/1/.