Recherche d'aide : Comment afficher en permanence des étiquettes de données sur un graphique cohérentes avec leur position
P粉302160436
2023-08-15 23:21:18
<p>Je souhaite afficher ces étiquettes de données en permanence sur le graphique afin qu'elles soient toujours visibles, et pas seulement au survol de la souris. Quelqu'un peut-il m'aider? [Voici un exemple similaire à celui-ci] J'ai aussi déposé mon code.
(https://i.stack.imgur.com/TY8X1.png)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="fr">
<tête>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>exemple de diagramme circulaire</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
≪/tête>
<corps>
<div style="position : relative;">
<canvas id="pieChart" width="400" height="400"></canvas>
</div>
<script>
// Récupère l'élément canevas
var canevas = document.getElementById('pieChart');
//Créer un diagramme circulaire
var pieChart = nouveau graphique (toile, {
tapez : 'tarte',
données: {
libellés : ['en ligne', 'hors ligne'],
ensembles de données : [{
données : [8, 2],
Couleur d'arrière-plan : ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'],
largeur de bordure : 0
}]
},
options : {
réactif : vrai,
maintenirAspectRatio : faux,
plugins : {
légende: {
affichage : faux
},
étiquettes de données : {
couleur : '#fff',
Anchor: 'end', // Position de l'étiquette de données (début, centre, fin)
align: 'end', // alignement du texte (début, centre, fin)
offset : 10, // décalage entre l'étiquette et le graphique
formateur : (valeur, ctx) =>
laissez label = ctx.chart.data.labels[ctx.dataIndex];
return label + ': ' + valeur + '%';
}
}
}
}
});
</script>
</corps>
</html></pre>
<p><br /></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai ajouté un conteneur séparé pour les étiquettes et je les ai stylisés pour qu'ils correspondent à la couleur du graphique. J'utilise flexbox pour positionner les étiquettes à gauche du graphique. La fonction positionLabelsContainer() positionne le conteneur d'étiquettes en fonction de la taille du graphique et ajoute un écouteur d'événement à repositionner lorsque la fenêtre est redimensionnée.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>饼图示例</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <div style="position: relative;"> <canvas id="pieChart" width="400" height="400"></canvas> <div id="labels-container" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"> <div style="display: flex; flex-direction: column; align-items: flex-start;"> <div style="background-color: rgba(71, 190, 125, 1); width: 10px; height: 10px; margin-bottom: 5px;"></div> <div style="background-color: rgba(241, 65, 108, 1); width: 10px; height: 10px;"></div> </div> <div style="display: flex; flex-direction: column; align-items: flex-start; margin-left: 5px;"> <div>在线: 8%</div> <div>离线: 2%</div> </div> </div> </div> <script> // 获取canvas元素 var canvas = document.getElementById('pieChart'); var labelsContainer = document.getElementById('labels-container'); // 创建饼图 var pieChart = new Chart(canvas, { type: 'pie', data: { labels: ['在线', '离线'], datasets: [{ data: [8, 2], backgroundColor: ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'], borderWidth: 0 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, datalabels: false // 禁用数据标签，因为它们显示在自定义容器中 } } }); // 根据图表大小定位标签容器 function positionLabelsContainer() { labelsContainer.style.width = canvas.offsetWidth + 'px'; labelsContainer.style.height = canvas.offsetHeight + 'px'; } positionLabelsContainer(); // 初始定位 window.addEventListener('resize', positionLabelsContainer); // 调整大小时更新 </script> </body> </html>