简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Looking for help: How to permanently display data labels on a chart consistent with their position
P粉302160436
P粉302160436 2023-08-15 23:21:18
0
1
447
<p>I want to display these data labels permanently on the chart so that they are always visible, not just on mouseover. Can anyone help me? [Here is an example, similar to this one] I also put down my code. (https://i.stack.imgur.com/TY8X1.png)</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>pie chart example</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> <script> // Get the canvas element var canvas = document.getElementById('pieChart'); //Create a pie chart var pieChart = new Chart(canvas, { type: 'pie', data: { labels: ['online', 'offline'], 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: { color: '#fff', anchor: 'end', // The position of the data label (start, center, end) align: 'end', // Text alignment (start, center, end) offset: 10, // offset between label and chart formatter: (value, ctx) => { let label = ctx.chart.data.labels[ctx.dataIndex]; return label ': ' value '%'; } } } } }); </script> </body> </html></pre> <p><br /></p>
P粉302160436
P粉302160436

reply all(1)
P粉739706089
P粉7397060892023-08-16 21:44:17 1 floor

I added a separate container for the labels and styled them to match the chart color. I'm using flexbox to position the labels to the left of the chart. The positionLabelsContainer() function positions the label container based on the chart size and adds an event listener to reposition when the window is resized. 

<!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>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！