如何访问Chartjs插件的钩子?

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

祝大家一周愉快
我想知道你是否能帮助我,我正在使用Chartjs从服务器端应用图表在报告中,并从前端调用它们。
我正在使用的技术是用typescript和express开发的nodejs节点,我正在使用HTML模板的handlebar,集成Chartjs,因为除了免费之外,它在社区中也是强烈推荐的,但是现在我在实现方面遇到了一些问题
为了更好地集成来自服务器的图表,我使用chartjs-node-canvas并通过库生成图像,一旦我有了图像,我就把它传递给我的模板
所以我想添加子标签来分组信息,添加多级类别标签,但是当我想在插件中使用钩子时,它抛出了以下错误
image1 of the error
如何正确访问Chartjs插件挂钩?
最后,我想实现这样的目标:
example of the expected result
我留下的代码配置了我的图形,任何类型的帮助都将不胜感激,我是新来的社区,我希望我写的问题正确。非常感谢大家

  1. import {
  2. ChartJSNodeCanvas
  3. } from "chartjs-node-canvas";
  4. const canvasRenderService = new ChartJSNodeCanvas({
  5. width: 1100,
  6. height: 700,
  7. chartCallback: (ChartJS) => {
  8. ChartJS.register(require('chartjs-plugin-datalabels'))
  9. }
  10. });
  11. const mkChart = await canvasRenderService.renderToBuffer({
  12. type: 'bar',
  13. data: {
  14. labels: labels,
  15. datasets: [{
  16. type: 'line',
  17. label: '% ACTIVITY',
  18. backgroundColor: '#FF7605',
  19. borderColor: '#FF7605',
  20. data: lineBar,
  21. datalabels: {
  22. anchor: 'start',
  23. align: 'center',
  24. clamp: true,
  25. backgroundColor: '#FF7605',
  26. color: 'white',
  27. font: {
  28. weight: 'bold'
  29. }
  30. }
  31. },
  32. {
  33. type: 'bar',
  34. label: 'WEEKLY SUMMARY OF HOURS',
  35. backgroundColor: '#222A35',
  36. borderColor: '#222A35',
  37. data: barHorizontal,
  38. datalabels: {
  39. rotation: 270,
  40. padding: 10
  41. }
  42. },
  43. {
  44. type: 'bar',
  45. label: 'HOURS',
  46. backgroundColor: '#008582',
  47. borderColor: '#008582',
  48. data: colbWeekly,
  49. datalabels: {
  50. anchor: 'end',
  51. align: 'top',
  52. clamp: true,
  53. backgroundColor: '#008582',
  54. color: 'white',
  55. font: {
  56. weight: 'bold'
  57. }
  58. }
  59. }
  60. ]
  61. },
  62. options: {
  63. plugins: {
  64. datalabels: {
  65. color: 'white',
  66. font: {
  67. weight: 'bold'
  68. },
  69. },
  70. title: {
  71. display: true,
  72. text: 'AVERAGE WEEKLY HOURS'
  73. },
  74. afterDatasetsDraw(chart, args, pluginOptions) {
  75. const {
  76. ctx,
  77. chartArea: {
  78. left,
  79. right,
  80. top,
  81. bottom,
  82. width,
  83. height
  84. }
  85. } = chart;
  86. ctx.save();
  87. ctx.font = 'bolder 12px sans-serif';
  88. ctx.fillStyle = 'rgba(102, 102, 102, 1)';
  89. ctx.textAlign = 'center';
  90. ctx.fillText('WEEK 1', width / 4 + left, bottom + 30)
  91. }
  92. },
  93. elements: {
  94. line: {
  95. fill: false
  96. }
  97. },
  98. scales: {
  99. xAxis: {
  100. stacked: true,
  101. ticks: {
  102. minRotation: 90
  103. },
  104. grid: {
  105. display: false
  106. }
  107. }
  108. }
  109. }
  110. });
sf6xfgos

sf6xfgos1#

你不能访问插件挂钩从一个特定的插件在该插件的配置,你将需要创建自己的自定义插件,并在插件本身,你可以访问所有的挂钩:
第一个

相关问题