Chart.js v2 - 隐藏网格线
iSS*_*iSS 116 javascript chart.js2
我正在使用Chart.js v2绘制一个简单的折线图.一切都很好,除了有我不想要的网格线:
折线图的文档在这里:https://nnnick.github.io/Chart.js/docs-v2/#line-chart,但我找不到任何关于隐藏这些"网格线"的信息.
如何删除网格线？
Irv*_*ine 269
我找到了一个解决方案,用于隐藏折线图中的网格线.
将gridLines颜色设置为与div的背景颜色相同.
var options = {
scales: {
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}],
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
}
或使用
var options = {
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
}
- 或使用display:false,而不是"color" (29认同)
- 这也删除了 x 轴（单线）和 y 轴（单线）的线。但我只想删除图表上的线条。所以drawOnChartArea: false 正在做正确的事情。 (7认同)
- 非常感谢你!如果只有文档在这个主题上更清楚一点.:) (3认同)
- 这实际上是将gridLines颜色设置为“ 0不透明”黑色（透明颜色）。因此，无论div的背景颜色如何，这都应该起作用。 (2认同)
- 虽然第一个答案可能会得到所需的图片，但它有点像黑客。第二种解决方案，实际上将 gridLines 显示属性设置为 false，似乎更正确。 (2认同)
use*_*568 30
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
}
- 这个答案使我可以保持比例，但不能在图表上绘制网格线。 (2认同)
小智 22
从 3.x 版开始，使用此语法。参考chart.js迁移指南：https ://www.chartjs.org/docs/latest/getting-started/v3-migration.html
scales: {
x: {
grid:{
display:false
}
},
y:
{
grid:{
display:false
}
}
}
- 这应该投票更高。我想知道为什么上面的答案都不起作用！ (4认同)
- 事实上，在 2021 年 8 月，接受的答案不再有效，但这个答案有效。 (3认同)
dav*_*vid 18
如果你想让它们在默认情况下消失,你可以简单地设置:
Chart.defaults.scale.gridLines.display = false;
小智 10
好吧，没关系..我找到了诀窍：
scales: {
yAxes: [
{
gridLines: {
lineWidth: 0
}
}
]
}
小智 9
如果要隐藏网格线但要显示yAxes，则可以设置：
yAxes: [{...
gridLines: {
drawBorder: true,
display: false
}
}]
下面的代码仅从图表区域中删除网格线，而不是 x&y 轴标签中的网格线
Chart.defaults.scale.gridLines.drawOnChartArea = false;
- 这是正确的答案，因为这不会改变绘图区域的任何内容，谢谢艾哈迈德 (2认同)
在 ChartJS 3 中，访问此配置有一点不同。该属性的名称不是gridLines，而是grid，如官方文档所示：
options.gridLines被重命名为options.grid
来源： https ://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks
它看起来是这样的：
const options = {
scales: {
x: {
grid: {
display: false,
},
},
},
};
请参考官方文档：
https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
下面的代码更改将隐藏网格线：
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false
}
}]
}
小智 5
更新了 ChartJs 的代码，版本 = 4.3.0
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
grid:{
display:false
}
}
}
}
});
</script>