gpt4 book ai didi

chart.js - Chart.js 中的水平条形图

转载 作者:行者123 更新时间:2023-12-02 17:22:09 24 4
gpt4 key购买 nike

我正在尝试使用 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)是刻度的左限。

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

enter image description here

<小时/>

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

  • 将 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 来查看结果:

    enter image description here

  • beginAtZero 属性设置为 true,这与将 min 设置为 0 相同:

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

    您可以看到将 beginAtZero 属性设置为 true 的结果 on this jsFiddle .

关于chart.js - Chart.js 中的水平条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40254027/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com