Mencari bantuan: Cara memaparkan label data secara kekal pada carta yang konsisten dengan kedudukannya
P粉302160436
2023-08-15 23:21:18
<p>Saya mahu memaparkan label data ini secara kekal pada carta supaya ia sentiasa kelihatan, bukan hanya pada tetikus. Bolehkah sesiapa membantu saya? [Ini adalah contoh, serupa dengan yang ini] Saya juga meletakkan kod saya.
(https://i.stack.imgur.com/TY8X1.png)</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<kepala>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">contoh carta pai</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<badan>
<div style="position: relative;">
<canvas id="pieChart" width="400" height="400"></canvas>
</div>
<skrip>
// Dapatkan elemen kanvas
var canvas = document.getElementById('PieChart');
//Buat carta pai
var pieChart = Carta baharu(kanvas, {
jenis: 'pai',
data: {
label: ['dalam talian', 'luar talian'],
set data: [{
data: [8, 2],
Warna latar belakang: ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'],
Lebar sempadan: 0
}]
},
pilihan: {
responsif: benar,
maintainAspectNisbah: palsu,
pemalam: {
lagenda: {
paparan: palsu
},
label data: {
warna: '#fff',
sauh: 'akhir', // Kedudukan label data (mula, tengah, akhir)
jajar: 'tamat', // penjajaran teks (mula, tengah, tamat)
offset: 10, // offset antara label dan carta
pemformat: (nilai, ctx) =>
biarkan label = ctx.chart.data.labels[ctx.dataIndex];
kembalikan label + ': ' + nilai + '%';
}
}
}
}
});
</skrip>
</badan>
</html></pre>
<p><br /></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya menambah bekas berasingan untuk label dan menggayakannya agar sepadan dengan warna carta. Saya menggunakan flexbox untuk meletakkan label di sebelah kiri carta. Fungsi positionLabelsContainer() meletakkan bekas label berdasarkan saiz carta dan menambah pendengar acara untuk meletakkan semula apabila tetingkap diubah saiz.
<!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>