图表中的水平条形图.js

Question

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

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

    }
});

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

Answer 1

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

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

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

>

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

您可以在这个jsdild上看到< code>min设置为60的结果:

将＜code＞beginAtZero，这与将＜code>min设置为0相同：

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

您可以看到这个js dild的< code>beginAtZero属性设置为< code>true的结果。