在chartjs 4中删除或更改图表中坐标轴的颜色

ccrfmcuu  于 2024-01-07  发布在  Chart.js
关注(0)|答案(1)|浏览(174)

我的chart.js代码中有一个问题,我想从图表中删除两条轴线

  1. const MAINCHARTCANVAS = document.querySelector(".main-chart")
  2. new Chart(MAINCHARTCANVAS, {
  3. type: 'line',
  4. data: {
  5. labels: ["Mon" , "Tue" , "Wed" , "Thu" , "Fri" , "Sat" , "Sun"],
  6. datasets: [{
  7. label: 'My First Dataset',
  8. data: [7,5,7,7,8,7,4],
  9. borderColor: "#4F3422",
  10. tension: 0.4,
  11. borderWidth:7,
  12. borderSkipped: true,
  13. }]
  14. },
  15. options: {
  16. scales: {
  17. x:{
  18. grid:{
  19. display:false,
  20. },
  21. border:{
  22. didplay: false,
  23. }
  24. },
  25. y:{
  26. drawBorder: false,
  27. beginAtZero: true,
  28. grid:{
  29. lineWidth:3,
  30. color:"#E8ddd9",
  31. },
  32. border: {
  33. display:false,
  34. dash: [10,16],
  35. },
  36. ticks: {display: false}
  37. }
  38. },
  39. plugins: {
  40. legend: false, // Hide legend
  41. tooltip:{
  42. enabled: false
  43. },
  44. backgroundCircle: false
  45. },
  46. responsive: true,
  47. maintainAspectRatio: false,
  48. elements: {
  49. point:{
  50. radius: 3
  51. }
  52. }
  53. }
  54. })
  55. `
  56. this my previous code I had tried
  57. changing color or removing the axis enough for me
  58. [enter image description here](https://i.stack.imgur.com/DhW4Z.png)

字符串

8hhllhi2

8hhllhi21#

您可以在您的选项中使用以下设置:

  1. scales:{
  2. x: {
  3. grid:{
  4. display: false,
  5. drawBorder: false
  6. },
  7. border: {
  8. display:false,
  9. },
  10. },
  11. y: {
  12. grid:{
  13. display: false,
  14. drawBorder: false
  15. },
  16. border: {
  17. display:false,
  18. },
  19. }
  20. },

字符串
通过该代码,它将满足隐藏所有的边界和网格,你可以看到下面的图像:

展开查看全部

相关问题