chart.js中的水平条形图

Question

我正在尝试使用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
            }]
        }

    }
});

但它只显示了一个条形图。我错过了什么？

- s.k.paul

---

你使用的是哪个版本的Chart.js？ - Tieson T.

@TiesonT. - 我已经更新了我的版本信息的问题。 - s.k.paul

Answer 1

由于您的数据的最小值（这里是75）是比例尺的左侧限，因此您只能看到一个图表。

如下所示的代码结果截图显示，如果您将光标悬停在比例尺上，仍然可以看到相关数据，这意味着它在这里。

---

有两种方法可以解决这个问题:

• 将xScale ticks的min属性设置为您想要的值（当然要足够大以便看到）：

  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
              }]
          }
      }
  });
  

  你可以通过在这个 jsFiddle 上 将min设置为60来查看结果:

  

• 将beginAtZero属性设置为true，这与将min设置为0相同：

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

你可以在 这个 jsFiddle上设置beginAtZero属性为true来查看结果。

- tektiv

---

如何使用颜色隐藏“Test”文本 - Karthic G