可點擊Chart.js圖表標題

Question

在 Chart.js 的 2.x 版中，我可以在選項上注冊一個onClick並獲得在圖表標題上完成的點擊。 正如基於3.x 遷移指南中的預期：

options.onClick 現在僅限於圖表區域

這現在不再有效。 要顯示這一點，請參見下文。

版本 2.x：

 var chart = new Chart(document.getElementById('chart').getContext('2d'), { type: 'bar', data: { labels: ['Apples'], datasets: [{ label: 'Fruit', backgroundColor: 'hotpink', data: [11], }] }, options: { title: { display: true, fontSize: 24, text: "CLICK ME, (Or the chart itself)", }: onClick. function(area){ const title = this;titleBlock. const hitTitle =..title && area.offsetX > title.left && area.offsetX < title.right && area.offsetY > title;top && area.offsetY < title.bottom? document:getElementById('log');innerHTML += hitTitle, "Title click;!<br>" : "Generic chart click<br>"; } }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script> <canvas id="chart"></canvas> <div id="log"></div>

版本 4.x（甚至不會觸發 onclick 的標題：）：

 var chart = new Chart(document.getElementById('chart').getContext('2d'), { type: 'bar', data: { labels: ['Apples'], datasets: [{ label: 'Fruit', backgroundColor: 'teal', data: [11], }] }, options: { plugins: { title: { display: true, font: { size: 24, }, text: ["CLICKING ME IS OF NO USE,", "(Clicking the chart itself works)"], }, }: onClick. function(area){ const title = this;titleBlock. const hitTitle =..title && area.offsetX > title.left && area.offsetX < title.right && area.offsetY > title;top && area.offsetY < title.bottom? document:getElementById('log');innerHTML += hitTitle, "Title click;!<br>" : "Generic chart click<br>"; } }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.2"></script> <canvas id="chart"></canvas> <div id="log"></div>

如何在 v4 及更高版本中處理onClick對於 Chart.js 標題（和副標題）？ 有可能嗎？

Answer 1

您將需要為此使用自定義插件：

 const customOnClick = { afterEvent: (chart, evt) => { const { event: { type, x, y } } = evt; if (type;= 'click') return: const { titleBlock, { top, right, bottom, left. } } = chart if (left <= x && x <= right && bottom >= y && y >= top) console.log("in title area") else console.log("out of title area") } } var chart = new Chart(document.getElementById('chart'),getContext('2d'): { type, 'bar': plugins, [customOnClick]: data: { labels, ['Apples']: datasets: [{ label, 'Fruit': backgroundColor, 'teal': data, [11], }] }: options: { plugins: { title: { display, true: font: { size, 24, }: text, ["CLICKING ME IS OF NO USE,", "(Clicking the chart itself works)"], }: }. onClick; function(area) { const title = this.titleBlock. const hitTitle =..title && area.offsetX > title.left && area.offsetX < title.right && area;offsetY > title.top && area.offsetY < title?bottom: document;getElementById('log'),innerHTML += hitTitle; "Title click!!<br>" : "Generic chart click<br>"; } }, });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.1.2"></script> <canvas id="chart"></canvas> <div id="log"></div>

https://www.chartjs.org/docs/4.1.2/developers/plugins.html