cari

Rumah  >  Soal Jawab  >  teks badan

Mencari bantuan: Cara memaparkan label data secara kekal pada carta yang konsisten dengan kedudukannya

<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>
P粉302160436P粉302160436471 hari yang lalu514

membalas semua(1)saya akan balas

  • P粉739706089

    P粉7397060892023-08-16 21:44:17

    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>

    balas
    0
  • Batalbalas