如何访问 Chartjs 插件的钩子？

Question

祝大家一周快乐

我想知道您是否可以帮助我，我正在使用服务器端的 Chartjs 在报告中应用图表并从前端调用它们。

我使用的技术是使用 typescript 和 express 开发的 nodejs 节点，我正在使用 HTML 模板的把手，集成 Chartjs，因为除了免费之外，它在社区中被强烈推荐，但现在我遇到了一些问题执行

为了更好地集成来自服务器的图表，我正在使用chartjs-node-canvas并通过库生成图像，一旦我有了图像，我将它传递给我的模板

所以我想添加子标签来分组信息，添加多级类别标签，但是当我想使用插件中的钩子时它会抛出以下错误

错误的图像1

如何正确访问 Chartjs 插件挂钩？

最后，我想实现这样的目标：

预期结果示例

我留下了我的图表配置的代码，任何类型的帮助都会非常感激，我是社区的新手，我希望我已经正确地写了这个问题。 非常感谢大家

 import { ChartJSNodeCanvas } from "chartjs-node-canvas"; const canvasRenderService = new ChartJSNodeCanvas({ width: 1100, height: 700, chartCallback: (ChartJS) => { ChartJS.register(require('chartjs-plugin-datalabels')) } }); const mkChart = await canvasRenderService.renderToBuffer({ type: 'bar', data: { labels: labels, datasets: [{ type: 'line', label: '% ACTIVITY', backgroundColor: '#FF7605', borderColor: '#FF7605', data: lineBar, datalabels: { anchor: 'start', align: 'center', clamp: true, backgroundColor: '#FF7605', color: 'white', font: { weight: 'bold' } } }, { type: 'bar', label: 'WEEKLY SUMMARY OF HOURS', backgroundColor: '#222A35', borderColor: '#222A35', data: barHorizontal, datalabels: { rotation: 270, padding: 10 } }, { type: 'bar', label: 'HOURS', backgroundColor: '#008582', borderColor: '#008582', data: colbWeekly, datalabels: { anchor: 'end', align: 'top', clamp: true, backgroundColor: '#008582', color: 'white', font: { weight: 'bold' } } } ] }, options: { plugins: { datalabels: { color: 'white', font: { weight: 'bold' }, }, title: { display: true, text: 'AVERAGE WEEKLY HOURS' }, afterDatasetsDraw(chart, args, pluginOptions) { const { ctx, chartArea: { left, right, top, bottom, width, height } } = chart; ctx.save(); ctx.font = 'bolder 12px sans-serif'; ctx.fillStyle = 'rgba(102, 102, 102, 1)'; ctx.textAlign = 'center'; ctx.fillText('WEEK 1', width / 4 + left, bottom + 30) } }, elements: { line: { fill: false } }, scales: { xAxis: { stacked: true, ticks: { minRotation: 90 }, grid: { display: false } } } } });

Answer 1

您无法从该插件配置中的特定插件访问插件挂钩，您需要创建自己的自定义插件，并且在插件本身中您可以访问所有挂钩：

 const customPlugin = { id: 'customPlugin', afterDatasetsDraw: (chart, args, opts) => { console.log('afterDatasetsDraw') }, beforeDatasetsDraw: (chart, args, opts) => { console.log('beforeDatasetsDraw'); } // You can add all the other hooks here } const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: {}, plugins: [customPlugin] } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script> <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body>

如何访问 Chartjs 插件的钩子？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-19 16:52:45

如何访问 Chartjs 插件的钩子？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-19 16:52:45

解决方案1
0 已采纳 2022-09-19 16:52:45