chart.js中的水平条形图 [英] Horizontal bar chart in chart.js

问题描述

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

  var MeSeContext = document.getElementById （ MeSeStatusCanvas）。getContext（ 2d）; 
 var MeSeData = {
标签：[
 ME，
 SE 
]，
数据集：[
 {
标签： Test，
数据：[100，75]，
 backgroundColor：[＃669911，＃119966]，
 hoverBackgroundColor：[＃66A2EB， ＃FCCE56] 
}] 
}; 
 
 var MeSeChart = new Chart（MeSeContext，{
 type：'horizo​​ntalBar'，
 data：MeSeData，
 options：{
标度：{
 y轴：[{
堆叠：真
}] 
} 
 
} 
}）； 
  

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

解决方案

您只能看到一张图表，因为数据的最低值（此处 75 ）是标尺的左极限。

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

---

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

• 设置以下项的 min 属性xScale滴答至所需的值（当然足以看到它）：

    var MeSeChart = new Chart（MeSeContext，{
   type：'horizo​​ntalBar'，
   data：MeSeData，
  选项：{
  比例尺：{
   xAxes：[{
   ticks：{
   min：60 //根据需要编辑值
  } 
  }]，
   y轴：[{
   stacked：true 
   }] 
  } 
  } 
  }）； 
    

  您可以看到 min 的结果在此jsFiddle上设置为60




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

    xAxes：[{
   ticks：{
   beginAtZero：true 
  } 
  }]，
    

  您可以将 beginAtZero 属性设置为 true 在此jsFiddle上的 。

I am trying to draw a horizontal bar chart using 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
            }]
        }

    }
});

But it only shows one bar. What did I miss here?

解决方案

You can see only one chart because the lowest value of your data (75 here) is the scale's left limit.

As shown in the following screenshot of your code's result, if you hover on the scale, you can still see the associated data, which means it is here.

---

You have two ways to fix this :

• Set the min property of the xScale ticks to the value you want (enough to see it of course) :

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

  You can see the result with a min set to 60 on this jsFiddle :

• Set the beginAtZero property to true, which is the same as setting min to 0 :

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

  You can see the result with the beginAtZero property set to true on this jsFiddle.

这篇关于chart.js中的水平条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！