如何使用 Chart.js 版本 3.2.1 在圓環圖中添加文本
[英]How to add text inside the doughnut chart using Chart.js version 3.2.1
問題描述
- 我在 HTML 中使用 Canvas，如何使用在圓環圖中添加文本。 這是我的 javascript 代碼和 HTML 代碼。 我使用了chart js 3.2.1版，所以請給出相同版本（3）的解決方案。
var overallStatsCanvasCtx = document.getElementById('pademicOverallStats'); var dataPandemicEmp = { labels: ['Normal', 'No Mask', 'Warning', 'High Temperature'], datasets: [{ label: "Overall Statistics", data: ['4000', '2000', '1500', '2500'], backgroundColor: ['#43C187', '#8FC3F0', '#FFCD5E', '#FF4800'], }] }; var overallStatschartOptions = { responsive: true, plugins: { legend: { display: true, align: 'center', position: 'bottom', labels: { fontColor: '#474B4F', usePointStyle: true, } } }, }; var doughnutChart = new Chart(overallStatsCanvasCtx, { type: 'doughnut', data: dataPandemicEmp, options: overallStatschartOptions, });
<canvas id="pademicOverallStats"></canvas>
3 個解決方案
解決方案1
0 2021-05-11 11:51:25
您將不得不為此使用自定義插件
var data = { labels: [ "Red", "Blue", "Yellow" ], datasets: [{ data: [300, 50, 100], backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] }] }; var promisedDeliveryChart = new Chart(document.getElementById('myChart'), { type: 'doughnut', data: data, options: { responsive: true, plugins: { legend: { display: false } } }, plugins: [{ id: 'text', beforeDraw: function(chart, a, b) { var width = chart.width, height = chart.height, ctx = chart.ctx; ctx.restore(); var fontSize = (height / 114).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; var text = "75%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); } }] });
<body> <canvas id="myChart"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.min.js"></script> </body>
解決方案2
0 2022-04-13 04:49:33
var data = { labels: [ "Red", "Blue", "Yellow" ], datasets: [{ data: [300, 50, 100], backgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ], hoverBackgroundColor: [ "#FF6384", "#36A2EB", "#FFCE56" ] }] }; var promisedDeliveryChart = new Chart(document.getElementById('myChart'), { type: 'doughnut', data: data, options: { responsive: true, plugins: { legend: { display: false } } }, plugins: [{ id: 'text', beforeDraw: function(chart, a, b) { var width = chart.width, height = chart.height, ctx = chart.ctx; ctx.restore(); var fontSize = (height / 240).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; var text = "75%", textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); } }] });
<body> <canvas id="myChart"></canvas> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.0/dist/chart.min.js"></script> </body>
解決方案3
0 2022-09-20 20:59:37
我正在做一個內聯插件並使用 chartjs 版本 3.9.1。 我已經調整了其他答案以滿足我的需要，其中考慮了圖表標題和圖例。 圓圈中心的文字也是基於第 0 個數據集的總數。
plugins: [{
id: 'doughnutInteriorText',
beforeDraw: function(chart) {
var width = chart.chartArea.width,
height = chart.chartArea.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 114).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
var text = chart.data.datasets[0].data.reduce((partialSum, a) => partialSum + a, 0),
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = (height / 2) + chart.legend.height + chart.titleBlock.height;
ctx.fillText(text, textX, textY);
ctx.save();
}
}]
如何使用primeng/chart.js在圓環圖中放置文本？
[英]How to place text inside of doughnut chart using primeng/chart.js?
使用 Chart.js 和 Angular2、Ionic2 的圓環圖內的文本
[英]Text inside Doughnut chart using Chart.js and Angular2, Ionic2
如何在 Chart.JS 的半圓環圖中間添加一些文本？
[英]How can I add some text in the middle of a half doughnut chart in Chart.JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.