在 Chartjs 3.1 中始终显示所有工具提示是可能的
[英]It is possible to always show all tooltip in Chartjs 3.1
问题描述
I want to show all tooltip always (not only hover), so that when i download it as pdf i can see the tooltip data.
我想始终显示所有工具提示（不仅仅是悬停），这样当我将其下载为 pdf 时，我可以看到工具提示数据。 I used chartjs 3.1.我用的是chartjs 3.1。 it is possile?有可能吗？
1 个解决方案
解决方案1
0 2021-04-26 13:53:00
If you want all datapoints you cant use the tooltip for that, you will have to use the datalabels plugin for that: https://v2_0_0-beta_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.html如果您想要所有无法使用工具提示的数据点，则必须为此使用 datalabels 插件： https://v2_0_0-beta_1--chartjs-plugin-datalabels.netlify.app/samples/charts/line.ZFC35FDC70D5FC69D269883A822C7
If you only want to show 1 datapoint with the tooltip on download you can programaticatlly trigger the tooltip like so:如果您只想在下载时显示 1 个带有工具提示的数据点，您可以编程触发工具提示，如下所示：
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: {} } var ctx = document.getElementById('chartJSContainer').getContext('2d'); var chart = new Chart(ctx, options); document.getElementById("triggger").addEventListener("click", () => { const tooltip = chart.tooltip; if (tooltip.getActiveElements().length > 0) { tooltip.setActiveElements([], { x: 0, y: 0 }); } else { const chartArea = chart.chartArea; tooltip.setActiveElements([{ datasetIndex: 0, index: 2, }, { datasetIndex: 1, index: 2, }]); } chart.update(); });
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <br> <button id="triggger"> trigger hover </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.