如何抵消“chart.js”条形图中的条形图例？
[英]How to offset the legends of the bars in a "chart.js" bar chart?
问题描述
我试图让条形图中的 x 轴标签不直接位于每个条形下方（这是默认设置），而是位于条形的左侧/右侧。 因为它是绘制直方图时的首选。 然后，每个条的左右 label 将是该条的间隔。
我从文档中发现它与我应该应用于 x 轴的属性 grid:{offset:true} 有关，但代码对我不起作用。 标签仍然在每个条的正下方。
我究竟做错了什么？ 任何帮助深表感谢！
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
你不能让它工作的主要原因是因为你使用了这个问题的代码，它是为 2.7 版编写的，而你正在使用 3.2 版。 版本 3 有许多重大更改，包括选项中的许多不同名称。
我也无法让它工作，但使用 3.x 版本应该很容易实现。
如何对齐条形图中的条形 - Chart.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.