suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Ich suche Hilfe: So zeigen Sie Datenbeschriftungen in einem Diagramm dauerhaft entsprechend ihrer Position an

<p>Ich möchte diese Datenbeschriftungen dauerhaft im Diagramm anzeigen, damit sie immer sichtbar sind, nicht nur beim Mouseover. Kann mir jemand helfen? [Hier ist ein Beispiel, ähnlich wie dieses] Ich habe auch meinen Code abgelegt. (https://i.stack.imgur.com/TY8X1.png)</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html>html lang="en"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beispiel für ein Kreisdiagramm</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <Körper> <div style="position: relative;"> <canvas id="pieChart" width="400" height="400"></canvas> </div> <script> // Holen Sie sich das Canvas-Element var canvas = document.getElementById('pieChart'); //Erstellen Sie ein Kreisdiagramm var pieChart = new Chart(canvas, { Typ: 'Kuchen', Daten: { Etiketten: ['online', 'offline'], Datensätze: [{ Daten: [8, 2], Hintergrundfarbe: ['rgba(71, 190, 125, 1)', 'rgba(241, 65, 108, 1)'], borderWidth: 0 }] }, Optionen: { reaktionsfähig: wahr, keepAspectRatio: false, Plugins: { Legende: { Anzeige: falsch }, Datenaufkleber: { Farbe: '#fff', Anker: 'Ende', //Die Position der Datenbeschriftung (Anfang, Mitte, Ende) align: 'end', // Textausrichtung (Start, Mitte, Ende) Offset: 10, // Offset zwischen Beschriftung und Diagramm Formatierer: (Wert, ctx) => let label = ctx.chart.data.labels[ctx.dataIndex]; return label + ': ' + value + '%'; } } } } }); </script> </body> </html></pre> <p><br /></p>
P粉302160436P粉302160436508 Tage vor538

Antworte allen(1)Ich werde antworten

  • P粉739706089

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

    我为标签添加了一个独立的容器，并将其样式设置为与图表颜色相匹配。我使用flexbox将标签定位在图表的左侧。positionLabelsContainer()函数根据图表大小定位标签容器，并添加了一个事件监听器以在窗口调整大小时重新定位。

    <!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>

    Antwort
    0
  • StornierenAntwort