我一直在使用一些 Chart.js,并且一直在尝试找出如何删除图表上的轴线。
我已设法删除出现在表示数据的图表中的网格线,但在删除这两行时遇到问题。
您可以看到我为下面的图表创建的chart.js。
var ctx = document.getElementById("volCause").getContext('2d');
var volCause_Doughnut = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: <?php echo $cause_label_json?>,
datasets: [{
backgroundColor: benefactoGraph_colours,
data: <?php echo $cause_value_json?>
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false,
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
},
}],
yAxes: [{
gridLines: {
display: false,
}
}]
}
}
});
如有任何建议,我们将不胜感激。
您需要将 grid-lines 的
drawBorder
属性设置为 false
才能删除这些轴线,如下所示:
...
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Volunteer Hours',
},
gridLines: {
display: false,
drawBorder: false //<- set this
},
}],
yAxes: [{
gridLines: {
display: false,
drawBorder: false //<- set this
}
}]
}
...
您可以在轴对象中设置 display: false
scales: {
xAxes: [{
display: false,
gridLines: {}
}],
yAxes: [{
display: false,
gridLines: {}
}]
}
对于不同版本的 Chart.js,其他答案都是正确的,但截至 2020 年 1 月,在版本 2.9.3 中,我能够通过将
display: false
嵌套在 gridlines
内来解决该问题,如下所示:
...
, options:
scales: {
xAxes: [{
gridLines: {
display: false
},
...
这是一个相关的 GitHub 问题。
对于 4.4.4 来说是:
options: {
scales:{
x: {
border: {
display: false,
}
},
y: {
border: {
display: false,
}
}
}
}