如何在图表上显示不同的工具提示（在列中）？
[英]How to show different tooltips on charts (in columns)?
问题描述
How to display different tooltips on chart columns?
如何在图表列上显示不同的工具提示？ It is necessary to output data from:需要output数据来自：
data: [220, 315, 380, 470, 520] and data: [135, 190, 180, 160, 240]数据：[220、315、380、470、520] 和数据：[135、190、180、160、240]
Now duplicated.现在复制了。 Here is my code (using chart.js):这是我的代码（使用 chart.js）：
My fiddle
https://jsfiddle.net/ebgaouv8/ https://jsfiddle.net/ebgaouv8/
Thanks in advance for any help!提前感谢您的帮助！
1 个解决方案
解决方案1
0 2021-03-24 23:14:25
You have to change your tooltip mode from label to point and dont hard code the datasetIndex.您必须将工具提示模式从label为point并且不要对 datasetIndex 进行硬编码。 To solve deprecation issue, remove the barpercentage from the scale option and specify it in every dataset or you can configure it globally before you make the chart like this: Chart.defaults.global.datasets.bar.barPercentage = 0.5;要解决弃用问题，请从scale选项中删除barpercentage并在每个数据集中指定它，或者您可以在制作图表之前对其进行全局配置： Chart.defaults.global.datasets.bar.barPercentage = 0.5; . .
var barChart = { labels: ["2016", "2017", "2018", "2019", "2020"], datasets: [{ label: '', backgroundColor: "rgba(34,42,171, 0.7)", borderColor: 'rgba(34,42,171, 1)', borderWidth: 1, barPercentage: 0.5, data: [220, 315, 380, 470, 520] }, { label: '', backgroundColor: "#ceb947", barPercentage: 0.5, data: [135, 190, 180, 160, 240] }, ] }; var ctx4 = document.getElementById("chartJSContainer").getContext("2d"); window.newBar = new Chart(ctx4, { type: 'bar', data: barChart, options: { title: { display: false, fontStyle: 'bold', text: "Figure" }, legend: { display: false, position: "bottom", padding: 20, labels: {} }, tooltips: { mode: 'point', bodySpacing: 10, cornerRadius: 0, titleFontSize: 16, bodyFontSize: 14, titleMarginBottom: 15, callbacks: { label: function(tooltipItem, data) { var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]; value = value.toString(); value = value.split((/(?=(?:..)?$)/)); value = value.join(','); return 'Total: ' + value + ' %'; } } }, scales: { xAxes: [{ gridLines: false, ticks: { fontColor: 'rgb(37,39,103)', fontSize: '14', autoSkip: false, maxRotation: 45, minRotation: 45, padding: 15 } }], yAxes: [{ ticks: { fontColor: 'rgb(37,39,103)', fontSize: '14', beginAtZero: true, stepSize: 100, userCallback: function(value, index, values) { value = value.toString(); value = value.split(/(?=(?:..)?$)/); value = value.join(','); return value + ' %'; } } }] }, responsive: true, } });
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.