我在 Chart.js 中创建了一个水平分组条形图,但遇到了一个奇怪的问题。 问题是,虽然我禁用了所有网格线和边框,但图表仍然显示顶部水平线,我想将其删除。 在此屏幕截图中可见:/image/CUtzv.jpg 。 我还做了一个JSFiddle:https://jsfiddle.net/bsocw1v9/
function create_horizontal_bar_chart(){
/**
* Draw the chart on the correct canvas. Add the correct data sets
* and set the correct draw type.
*/
let ctx = document.getElementById('monthly_subscription_revenue_chart').getContext("2d");
let data = {
labels: ['Diensten'],
datasets: [
{
type: 'horizontalBar',
backgroundColor: "rgb(0,33,86)",
data: [2250],
stack: 1
},
{
type: 'horizontalBar',
backgroundColor: "rgb(219,219,219)",
data: [3000],
stack: 2
},
{
type: 'horizontalBar',
backgroundColor: "rgb(240,95,0)",
data: [750],
stack: 3
},
]
};
new Chart(ctx, {
type: 'horizontalBar',
data: data,
showScale: false,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
hover: {
mode: null
},
scales: {
xAxes: [{
stacked: true,
display: false,
gridLines: {
drawBorder: false,
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.9,
gridLines: {
drawBorder: false,
},
}]
}
}
});
}
我希望有人能帮助我解决这个问题,因为我根本不知道是什么原因造成的。
最佳答案
您仅禁用了图表边缘的边框(通过将 drawBorder
设置为 false
),而不禁用网格线。令你烦恼的线是网格线。要禁用轴的网格线,请使用:
gridLines: {
display: false
}
看看docs在“网格线配置”下。
关于javascript - 删除水平条形图中的顶部水平线 (Chart.js 2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43762496/