将X轴标签分组到ChartJS的多行上,并添加一个额外的维

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

请帮帮我
下面的图表显示了每个用户所属的不同区域
我想知道是否有一种方法可以按“用户角色”对信息进行分组,并且在分组后,在“x”轴上用一条线将其分开
我很困惑,因为根据这个问题Grouping y-axis labels on multiple lines on a ChartJS with an extra dimension中的公认答案,假设是否有可能做到这一点
但根据社区的其他回答,这是不可能的chartj
如何使它成为可能?它被称为多级分类标签
所以我希望能够修改X-Scale中的标签网格,通过一条线分隔区域,并添加一个子标签。类似于:

我留下了json和我的图表代码,我使用charjs-node-canvas来配置它,使用chartjs-plugin-datalabels来修改我的图表标签。

  1. const canvasRenderService = new ChartJSNodeCanvas({
  2. width: 1000,
  3. height: 650,
  4. chartCallback: (ChartJS) => {
  5. ChartJS.register(require('chartjs-plugin-datalabels'))
  6. }
  7. });
  8. const mkChart = await canvasRenderService.renderToBuffer({
  9. type: 'bar',
  10. data: {
  11. labels: labels,
  12. datasets: [{
  13. type: 'line',
  14. label: '% ACTIVITY',
  15. backgroundColor: '#FF7605',
  16. borderColor: '#FF7605',
  17. data: lineBar,
  18. datalabels: {
  19. anchor: 'start',
  20. align: 'center',
  21. clamp: true,
  22. backgroundColor: '#FF7605',
  23. color: 'white',
  24. font: {
  25. weight: 'bold'
  26. }
  27. }
  28. },
  29. {
  30. type: 'bar',
  31. label: 'WEEKLY SUMMARY OF HOURS',
  32. backgroundColor: '#222A35',
  33. borderColor: '#222A35',
  34. data: barHorizontal,
  35. datalabels: {
  36. rotation: 270,
  37. padding: 10
  38. }
  39. },
  40. {
  41. type: 'bar',
  42. label: 'HOURS',
  43. backgroundColor: '#008582',
  44. borderColor: '#008582',
  45. data: colbWeekly,
  46. datalabels: {
  47. anchor: 'end',
  48. align: 'top',
  49. clamp: true,
  50. backgroundColor: '#008582',
  51. color: 'white',
  52. font: {
  53. weight: 'bold'
  54. }
  55. }
  56. }]
  57. },
  58. options: {
  59. plugins: {
  60. datalabels: {
  61. color: 'white',
  62. font: {
  63. weight: 'bold'
  64. },
  65. },
  66. title: {
  67. display: true,
  68. text: 'AVERAGE WEEKLY HOURS'
  69. }
  70. },
  71. elements: {
  72. line: {
  73. fill: false
  74. }
  75. },
  76. scales: {
  77. x: {
  78. stacked: true,
  79. ticks: {
  80. minRotation: 90
  81. },
  82. grid: {
  83. display: false
  84. }
  85. }
  86. }
  87. }
  88. });

演示版

第一个

bfrts1fy

bfrts1fy1#

为了对信息进行分组,最后我所做的唯一一件事就是为我的余额分配一个AxisID,以便能够对它们进行绘制,从而使用线来分隔我的信息并添加子标签
第一个

相关问题