97夜夜澡人人爽人人,sm调教室论坛首页入口

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

<!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'); // 創(chuàng)建餅圖 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 // 禁用數(shù)據(jù)標(biāo)簽，因?yàn)樗鼈冿@示在自定義容器中 } } }); // 根據(jù)圖表大小定位標(biāo)簽容器 function positionLabelsContainer() { labelsContainer.style.width = canvas.offsetWidth + 'px'; labelsContainer.style.height = canvas.offsetHeight + 'px'; } positionLabelsContainer(); // 初始定位 window.addEventListener('resize', positionLabelsContainer); // 調(diào)整大小時(shí)更新 </script> </body> </html>