[英]Adding responsive text inside chart in Charts Js
我是編寫 JS/jquery 的新手,並希望構建一個帶有兩行文本的甜甜圈 charts.js 圖表:頂部的較大尺寸百分比和底部的較小文本僅“類別”,如下圖所示。
下面的代碼取自另一個類似的 stackoverflow 帖子https://jsfiddle.net/cmyker/ooxdL2vj/
努力理解如何擁有兩行響應式文本。 前任。 在不影響上面百分比文本的大小的情況下獲得“預付費”。 任何幫助是極大的贊賞。
HTML: <canvas id="myChart"> </canvas>
代碼:
Chart.pluginService.register({
beforeDraw: function (chart) {
if (chart.config.options.elements.center) {
//Get ctx from string
var ctx = chart.chart.ctx;
//Get options from the center object in options
var centerConfig = chart.config.options.elements.center;
var fontStyle = centerConfig.fontStyle || 'Arial';
var txt = centerConfig.text;
var txtB = centerConfig.textB;
var color = centerConfig.color || '#000';
var sidePadding = centerConfig.sidePadding || 20;
var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
//Start with a base font of 30px
ctx.font = "30px " + fontStyle;
//Get the width of the string and also the width of the element minus 10 to give it 5px side padding
var stringWidth = ctx.measureText(txt).width;
var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
// Find out how much the font can grow in width.
var widthRatio = elementWidth / stringWidth;
var newFontSize = Math.floor(30 * widthRatio);
var elementHeight = (chart.innerRadius * 2);
// Pick a new font size so it will not be larger than the height of label.
var fontSizeToUse = Math.min(newFontSize, elementHeight);
//Set font settings to draw it correctly.
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
ctx.font = fontSizeToUse+"px " + fontStyle;
ctx.fillStyle = color;
//Draw text in center
ctx.fillText(txt, centerX, centerY);
}
}
});
var config = {
type: 'doughnut',
data: {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
},
options: {
legend: {
display: false},
cutoutPercentage: 70,
aspectRatio: 1.5,
elements: {
center: {
text: '80%' ,
color: 'black', // Default is #000000
fontStyle: 'Arial', // Default is Arial
sidePadding: 20 // Defualt is 20 (as a percentage)
}
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, config);
如果我使用您的示例圖表作為模板,則可以使用以下代碼來完成。
Chart.pluginService.register({ beforeDraw: (chart) => { let ctx = chart.chart.ctx; ctx.save(); let fontSize = (chart.chart.height / 75).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; let text = chart.data.datasets[0].data[0] + '%'; let textX = Math.round((chart.chart.width - ctx.measureText(text).width) / 2); let textY = chart.chart.height / 2.25; ctx.fillText(text, textX, textY); fontSize = (chart.chart.height / 124).toFixed(2); ctx.font = fontSize + "em sans-serif"; ctx.textBaseline = "middle"; text = chart.data.labels[0]; textX = Math.round((chart.chart.width - ctx.measureText(text).width) / 2); textY = chart.chart.height / 1.6; ctx.fillText(text, textX, textY); ctx.restore(); } }); var config = { type: 'doughnut', data: { labels: ["Prepaid", "Others"], datasets: [{ data: [90.8, 9.2], backgroundColor: ["yellow", "white" ] }] }, options: { legend: { display: false }, tooltips: { enabled: false }, cutoutPercentage: 80, aspectRatio: 5, rotation: 70 } }; var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart"> </canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.