chart.js版本3:如何将网格线与步长对齐?

qlckcl4x  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(237)

预期值:enter image description here
电流:enter image description here
我希望步长和网格线在同一行中,并有一些填充
我怎样才能用chart.js v3实现这一点呢

  1. scales: {
  2. y: {
  3. stacked: true,
  4. grid: {
  5. offset: true,
  6. display: true,
  7. drawBorder: false,
  8. drawOnChartArea: true,
  9. borderDashOffset: 25,
  10. borderColor: "#d1d2db",
  11. borderWidth: 0.8800000000000001,
  12. color: "#d1d2db",
  13. },
  14. min: 0,
  15. max: max,
  16. ticks: {
  17. // forces step size to be 25 units
  18. stepSize: 25,
  19. beginAtZero: true,
  20. callback: callback,
  21. max: max,
  22. },
  23. title: {
  24. display: false,
  25. text: "Y axis title",
  26. },
  27. },
  28. x: {
  29. grid: {
  30. offset: true,
  31. display: true,
  32. drawBorder: false,
  33. drawOnChartArea: false,
  34. drawTicks: false,
  35. tickLength: 0,
  36. // borderDash: [0, 1],
  37. // borderDashOffset: 0,
  38. borderColor: "#d1d2db",
  39. // borderWidth: 0.8800000000000001,
  40. color: "#d1d2db",
  41. },
  42. },
  43. },

顺便说一句,是否也可以有从数据点到x轴的垂线,如预期设计所示?

7ivaypg9

7ivaypg91#

若要使水平grid缐条与y标签对齐,请定义options.scales.y.grid.offset: false或省略选项。
对于从图表底部到各个数据点的垂直线,您可以使用插件核心API。例如,在afterDraw挂钩中,您可以使用CanvasRenderingContext2D直接在canvas上绘制这些线。
请看一看您修改后的可运行代码,看看它是如何工作的。
第一个

相关问题