如何抵消“chart.js”条形图中的条形图例？
[英]How to offset the legends of the bars in a "chart.js" bar chart?
问题描述
I'm trying to get the labels of the x-axis in the bar chart to NOT be positioned directly under each bar (which is default setting) but instead stand in the left / right side of the bars.
我试图让条形图中的 x 轴标签不直接位于每个条形下方（这是默认设置），而是位于条形的左侧/右侧。 As it is preferred when drawing a histogram.因为它是绘制直方图时的首选。 The left and right label of each bar would then be the interval for that bar.然后，每个条的左右 label 将是该条的间隔。
I found out from the documentation it has something to do with the property grid:{offset:true} that I should apply to the x-axis, but the code isn't working for me.我从文档中发现它与我应该应用于 x 轴的属性 grid:{offset:true} 有关，但代码对我不起作用。 The labels are still directly underneath each bar.标签仍然在每个条的正下方。
What am I doing wrong?我究竟做错了什么？ Any help is much appreciated!任何帮助深表感谢！
const ctx = document.getElementById('canvas').getContext('2d'); const chart = new Chart(ctx, { type: 'bar', data: { labels: [0, 1, 2, 3, 4, 5, 6, 7], datasets: [{ label: 'Number of Arrivals', data: [19, 28, 20, 16, 50, 65, 58], backgroundColor: 'green', }]}, options: { scales: { xAxes: [{ display: false, ticks: {max: 10,}, grid: {offset: true}}, { display: true, ticks: {autoSkip: false, max: 10,}, grid: {offset: true} }], yAxes: [{ ticks: {beginAtZero: false} }] } } });
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script> </head> <body> <h1>The select element</h1> <canvas id="canvas" aria-label="Canvas with graph" role="img"></canvas> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-05-27 15:54:41
The main reason you can't get it to work is because you use the code from this question , which is written for version 2.7, and you are using version 3.2.你不能让它工作的主要原因是因为你使用了这个问题的代码，它是为 2.7 版编写的，而你正在使用 3.2 版。 There are many breaking changes with version 3, including many different names in the options.版本 3 有许多重大更改，包括选项中的许多不同名称。
I couldn't get it working either, but it should be easily possible with a 3.x version.我也无法让它工作，但使用 3.x 版本应该很容易实现。
Here's a link to a GitHub post including a jsfiddle link. 这是 GitHub 帖子的链接，其中包括 jsfiddle 链接。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.