如何在 ChartJS 标签上方制作小网格线？
[英]How can I make small grid lines above ChartJS labels?
问题描述
I am using Chart.js to draw a simple line chart.
我正在使用 Chart.js 来绘制一个简单的折线图。 How can I make small grid lines on top of the xAxis labels?如何在 xAxis 标签上制作小网格线？
The documentation for Line Chart is here: https://www.chartjs.org/docs/2.7.3/getting-started/?h=line , but I can't find anything about it.折线图的文档在这里： https://www.chartjs.org/docs/2.7.3/getting-started/?h=line ，但我找不到任何关于它的信息。
I removed the XAxis and YAxis grid lines.我删除了 XAxis 和 YAxis 网格线。
This is an example of the small grid lines wanted:这是所需的小网格线的示例：
Thanks in advance.提前致谢。
1 个解决方案
解决方案1
1 2021-12-15 16:15:22
Instead of removing the gridlines you can set the drawOnChartArea to false:您可以将drawOnChartArea设置为 false，而不是删除网格线：
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { scales: { x: { grid: { drawOnChartArea: false } }, y: { grid: { drawOnChartArea: false } } } }, } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.