chart.js 中的水平条形图答案

【问题标题】：Horizontal bar chart in chart.jschart.js 中的水平条形图
【发布时间】：2018-03-09 15:52:36
【问题描述】：

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

    }
});

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

【问题讨论】：

您使用的是哪个版本的 Chart.js？
@TiesonT。 - 我已经更新了问题我的版本信息。

标签： chart.js

【解决方案1】：

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

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

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

将 xScale 刻度的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
            }]
        }
    }
});

您可以看到将min 设置为60 on this jsFiddle 的结果：

将beginAtZero属性设置为true，与将min设置为0相同：
```
xAxes: [{
    ticks: {
        beginAtZero: true
    }
}],
```
你可以看到将beginAtZero属性设置为trueon this jsFiddle的结果。

【讨论】：

如何用颜色隐藏“测试”文本