Chart.js子标签

axkjgtzd  于 2023-04-30  发布在  Chart.js
关注(0)|答案(1)|浏览(212)

我正在尝试这样做:ChartJS multiple sub labels for label
这个老问题使用v2,我现在使用v4,我还希望有一些组比其他组具有更多的子项。下面是一个粗略的代码,接近我想要的:

  1. <canvas id="myChart"></canvas>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>
  3. <script>
  4. new Chart('myChart', {
  5. type: "bar",
  6. data: {
  7. labels: ["A", "B", "C", "D", "E"],
  8. datasets: [
  9. {
  10. label: 'Min',
  11. data: [7.16, 1, 2.8, 1, 16]
  12. },
  13. {
  14. label: 'Max',
  15. data: [85.86, 29.55, 181.78, 70.54, 89]
  16. },
  17. {
  18. label: 'Average',
  19. data: [29.03, 13.17, 39.13, 40.61, 51.50]
  20. }
  21. ]
  22. },
  23. options: {
  24. indexAxis: 'y',
  25. plugins: {
  26. legend: {
  27. position: 'bottom'
  28. }
  29. },
  30. scales: {
  31. y: {
  32. reverse: true
  33. },
  34. customGroups: {
  35. labels: ['Group 1', 'Group 2', 'Group 3'],
  36. axis: 'y',
  37. reverse: true,
  38. ticks: {
  39. maxRotation: 90,
  40. minRotation: 90,
  41. major: {
  42. enabled: true
  43. },
  44. align: 'end'
  45. }
  46. }
  47. }
  48. }
  49. });
  50. </script>

我正在寻找的是第1组围绕标签A,第2组围绕标签B,C,D,第3组围绕标签E。组应在这些行中居中。
我对另一个图书馆很开放,但这一个似乎是最好的。

vcirk6k6

vcirk6k61#

显然,当ticks旋转时,ticks.align没有效果。你可以使用ticks.labelOffset。有关详细信息,请参阅图表中所有笛卡尔坐标轴的通用刻度选项。js文档。
请看一下下面修改后的可运行代码,看看它是如何工作的。

  1. new Chart('myChart', {
  2. type: "bar",
  3. data: {
  4. labels: ["A", "B", "C", "D", "E"],
  5. datasets: [{
  6. label: 'Min',
  7. data: [7.16, 1, 2.8, 1, 16]
  8. },
  9. {
  10. label: 'Max',
  11. data: [85.86, 29.55, 181.78, 70.54, 89]
  12. },
  13. {
  14. label: 'Average',
  15. data: [29.03, 13.17, 39.13, 40.61, 51.50]
  16. }
  17. ]
  18. },
  19. options: {
  20. indexAxis: 'y',
  21. maintainAspectRatio: false,
  22. plugins: {
  23. legend: {
  24. position: 'bottom'
  25. }
  26. },
  27. scales: {
  28. y: {
  29. reverse: true
  30. },
  31. customGroups: {
  32. axis: 'y',
  33. labels: ['Group 1', '', 'Group 2', '', 'Group 3'],
  34. reverse: true,
  35. grid: {
  36. drawOnChartArea: false,
  37. lineWidth: [1, 1, 0, 0, 1, 1]
  38. },
  39. ticks: {
  40. maxRotation: 90,
  41. minRotation: 90,
  42. labelOffset: -22
  43. }
  44. }
  45. }
  46. }
  47. });
  1. div {
  2. height: 400px;
  3. }
  1. <script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
  2. <div>
  3. <canvas id="myChart"></canvas>
  4. </div>
展开查看全部

相关问题