Chartjs.org 在雷達圖工具提示上顯示不同的數據
[英]Chartjs.org Displaying different data on Radar Chart tooltip
問題描述
例如，在工具提示上，我想顯示選項 1 的數據，而不是 2，而是 200。因為我們在圖表中顯示了調整后的數據。 但最好在工具提示上顯示真實數據。
<script>
new Chart(document.getElementById('exampleChartjsRadar').getContext('2d'), {
type: 'radar',
data: {
labels: ["Option1", "Option2", "Option3"],
pointLabelFontSize: 14,
datasets: [{
label: 'Sporcu',
data: [2, 4, 5],
fill: true,
backgroundColor: 'rgba(4, 197, 249, 0.2)',
borderColor: 'rgb(4, 197, 249)',
pointBackgroundColor: 'rgb(4, 197, 249)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(4, 197, 249)'
}]
},
options: {
plugins: {
},
elements: {
line: {
borderWidth: 2
}
}
},
});
</script>
2 個解決方案
解決方案1
0 2022-07-27 14:49:07
您可以為此使用工具提示回調：
const options = { type: 'radar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }] }, options: { plugins: { tooltip: { callbacks: { label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw *100}`) } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> </body>
解決方案2
0 2022-07-28 14:40:16
感謝您的回答，如果我想寫不同的值而不是乘以 100，我該如何使用它。
label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw *100}`)
在 chart.js 上設置雷達圖數據時遇到問題； 循環問題
[英]Trouble with setting up radar chart data on chart.js; issue with a loop
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.