ChartJS 如何在水平条形图上删除所有网格线、边框并仅显示刻度

kgsdhlau  于 2023-02-16  发布在  Chart.js
关注(0)|答案(2)|浏览(230)

this post中的答案
我有以下图表,也可以在here中找到

  1. const d0 = new Date("2023-02-15T00:00:00.721Z").getTime()
  2. const d1 = new Date("2023-02-15T01:00:00.721Z").getTime()
  3. const d2 = new Date("2023-02-15T02:30:00.721Z").getTime()
  4. const d3 = new Date("2023-02-15T03:20:00.721Z").getTime()
  5. const d4 = new Date("2023-02-15T05:05:00.721Z").getTime()
  6. let values = [d0, d1, d2, d3, d4];
  7. let data = {
  8. labels: [''],
  9. datasets: [{
  10. label: 'up',
  11. axis: 'y',
  12. data: [d1],
  13. backgroundColor: 'red',
  14. },{
  15. label: 'down',
  16. axis: 'y',
  17. data: [d2],
  18. backgroundColor: 'yellow',
  19. },{
  20. label: 'out',
  21. axis: 'y',
  22. data: [d3],
  23. backgroundColor: 'green',
  24. },{
  25. label: 'up',
  26. axis: 'y',
  27. data: [d4],
  28. backgroundColor: 'red',
  29. }
  30. ]
  31. };
  32. const config = {
  33. data,
  34. type: 'bar',
  35. options:{
  36. elements: {
  37. bar: {
  38. borderWidth: 0
  39. }
  40. },
  41. ticks: {
  42. display: true
  43. },
  44. interaction: {
  45. mode: 'dataset'
  46. },
  47. tooltip: {
  48. mode: 'dataset'
  49. },
  50. hover: {
  51. mode: 'dataset'
  52. },
  53. onClick: function (e) {
  54. // debugger;
  55. var activePointLabel =
  56. this.getElementsAtEventForMode(e, 'dataset', { intersect: true }, false)
  57. alert(activePointLabel[0].datasetIndex);
  58. }
  59. ,
  60. plugins: {
  61. legend: {
  62. display: false,
  63. },
  64. title: {
  65. display: false,
  66. },
  67. },
  68. indexAxis: 'y',
  69. responsive: true,
  70. maintainAspectRatio: false,
  71. scales: {
  72. x: {
  73. grid: {
  74. display: true
  75. },
  76. min: d0,
  77. ticks: {
  78. callback: function(value, index, ticks) {
  79. return moment(value).format('HH:mm');
  80. }
  81. },
  82. // afterBuildTicks: axis => axis.ticks = values.map(v => ({ value: v }))
  83. },
  84. y: {
  85. grid: {
  86. display: false
  87. },
  88. stacked: true
  89. },
  90. }
  91. }};
  92. new Chart(document.getElementById("chart"), config);

它产生了这个...


] 1
我想去掉所有的网格线,除了勾号,但是如果我设置网格显示为false,勾号也会消失,并且它还会在图表周围留下一个边框,etg类似于

有什么办法吗?

qeeaahzv

qeeaahzv1#

只需将border: {display: false}添加到scales配置中即可。here is the link to the documentation

  1. ...
  2. scales: {
  3. x: {
  4. border: {
  5. display: false,
  6. },
  7. ...
  8. },
  9. ...
  10. }
  11. ...
    • 更新添加的完整运行示例:**

x一个一个一个一个x一个一个二个x

展开查看全部
bnlyeluc

bnlyeluc2#

使用v3.8.2的tickColor(参见以下配置)

  1. scales: {
  2. x: {
  3. ...
  4. grid: {
  5. display: true,
  6. drawTicks: true, //show ticks
  7. borderColor: "transparent", //horizontal line color above ticks (x-axis)
  8. color: "transparent", //grid lines color
  9. tickColor: "#868e96" //ticks color (little line above points)
  10. },
  11. },
  12. ...
  13. }

相关问题