How to remove gridlines and grid labels in Chartjs Radar?(如何在Chartjs雷达中删除网格线和网格标签?)
本文介绍了如何在Chartjs雷达中删除网格线和网格标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用chartjs 2型雷达,如何删除网格线和网格线标签以使雷达图更类似于下面所示的所需雷达图?
当前:
所需:
推荐答案
要删除/减少网格线,可以将ticks
的maxTicksLimit
属性设置为一个数字(网格线的数量-约),如下所示:
scale: {
ticks: {
maxTicksLimit: 3
}
}
奖励:如果您希望删除所有网格线,将maxTicksLimit
设置为0
将不起作用。相反,请在图表选项中添加以下内容:
gridLines: {
display: false
}
要删除网格线标签(刻度),可以将刻度刻度的display
属性设置为false
,如下所示:
scale: {
ticks: {
display: false
}
}
ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ⧩
let ctx = document.querySelector('#canvas').getContext('2d');
let chart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'RADAR 1',
data: [3, 1, 6, 4, 7, 5, 4],
backgroundColor: 'rgba(0,119,204,0.2)',
borderColor: 'rgba(0,119,204, 0.5)'
}, {
label: 'RADAR 2',
data: [4, 2, 3, 6, 1, 7, 5],
backgroundColor: 'rgba(255, 0, 0 ,0.2)',
borderColor: 'rgba(255, 0, 0 ,0.5)'
}]
},
options: {
scale: {
ticks: {
display: false,
maxTicksLimit: 3
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>
这篇关于如何在Chartjs雷达中删除网格线和网格标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:如何在Chartjs雷达中删除网格线和网格标签?
基础教程推荐
猜你喜欢
- 响应更改 div 大小保持纵横比 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 动态更新多个选择框 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06