如何訪問 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