Chart.js 3.4/Vue3 如何隐藏边框刻度和设置特定数量的网格线
[英]Chart.js 3.4/Vue3 How to hide border ticks and set specific amount of grid lines
问题描述
I am using Chart.js v3.4 with Vue3.
我在 Vue3 中使用 Chart.js v3.4。 Here is my chart:这是我的图表：
I am wondering if there is a way to remove the tick marks that go past the axis of the chart (pointing to the axis labels) so that the shape is a solid rectangle with labels.我想知道是否有办法删除经过图表轴（指向轴标签）的刻度线，以便形状是带有标签的实心矩形。
Note: I am already using the drawBorder: false option for the y-axis.注意：我已经在为 y 轴使用drawBorder: false选项。
Secondly I want to make it so there are exactly 5 grid lines on the y-axis to keep 4 rows of boxes on the chart at all times.其次，我想让它在 y 轴上正好有 5 条网格线，以始终在图表上保留 4 行框。 I'm using dynamic data and ranges so the amount of boxes changes depending on the data.我正在使用动态数据和范围，因此框的数量会根据数据而变化。 (You can see a new box just barely started at the bottom of the chart, I don't want that to be showing). （您可以在图表底部看到一个刚刚开始的新框，我不想显示它）。 The way I determine the min and max of the chart is by taking the min/max of the data array and subtracting/adding 2 to them.我确定图表的最小值和最大值的方法是取数据数组的最小值/最大值并减去/添加 2。
1 个解决方案
解决方案1
1 2021-07-02 17:17:56
You can make use of the drawTicks and count propertys to achieve what your want.您可以使用drawTicks和count属性来实现您想要的。
Live example:现场示例：
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { y: { ticks: { count: 5, padding: 10 }, grid: { drawTicks: false } }, x: { ticks: { padding: 10 }, grid: { drawTicks: 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.4.0/chart.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.