英文:
How to Add filled circle in doghnut chart using chart.js
问题
我想在doughnut图表中使用chartjs添加背景颜色或带颜色的圆形。
我已经在doughnut图表的中心添加了文本。
但是我无法添加背景颜色。
我还想要去掉chart.js在图表中插入的内边距和外边距。
我想要的图表如下图所示：
[](https://i.stack.imgur.com/g1s9b.png)
我使用下面的代码已经实现了以下效果：
[![我使用下面的代码已经实现了以下效果][1]][1]
这是我渲染图表的代码：
data = {
labels: [
'性能'
],
datasets: [{
label: '性能',
data: [90, 10],
backgroundColor: [
'#27AE60',
'#3333331A'
]
}]
};
config = {
type: 'doughnut',
data,
options: {
cutout: 200,
legend: {
display: false,
},
plugins: {
legend: {
display: false
}
},
responsive: true,
rotation: 210, // 起始角度（度数）
circumference: 300,
radius: "50%"
},
plugins: [{
id: 'text',
beforeDraw: function (chart, a, b) {
let width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
let fontSize = (height / 200).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
let text = '90%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}],
centerText: {
display: true,
text: "280"
}
};
new Chart('性能', config);
[1]: https://i.stack.imgur.com/0M7M1.png
英文:
I want to add a background color or a cirle with color inside doghnut chart using chartjs.
I have already added text in the center of doghnut chart.
However I am not able to add the background colour.
I also want to remove padding and margin chart.js inserts in the chart
I want a chart like this
I am able to acheive following using below code
This my code to render chart
data = {
labels: [
'performance'
],
datasets: [{
label: 'performance;,
data: [90, 10],
backgroundColor: [
'#27AE60',
'#3333331A'
]
}]
};
config = {
type: 'doughnut',
data,
options: {
cutout: 200,
legend: {
display: false,
},
plugins: {
legend: {
display: false
}
},
responsive: true,
rotation: 210, // start angle in degrees
circumference: 300,
radius: "50%"
},
plugins: [{
id: 'text',
beforeDraw: function (chart, a, b) {
let width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
let fontSize = (height / 200).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
let text = '90%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}],
centerText: {
display: true,
text: "280"
}
};
new Chart('performance', config);
答案1
得分: 2
以下是翻译好的部分：
You can mimic this design by using a pie chart with specific configuration options.
您可以通过使用特定的配置选项来模仿这个设计。
Here is a working example, including the posted plugin code for drawing text in the middle (note that the plugin is changed from beforeDraw to afterDraw to keep the text above the fill segment):
以下是一个工作示例，包括用于在中间绘制文本的插件代码（请注意，将插件从beforeDraw更改为afterDraw以使文本位于填充段的上方）:
const data = {
datasets: [{
label: 'outer',
data: [1, 2],
backgroundColor: [
'#27AE60',
'#3333331A'
],
rotation: 210,
circumference: 300,
cutout: '50%',
borderWidth: 0
}, {
// dummy dataset to fill the middle.
label: 'inner',
data: [1],
backgroundColor: '#27AE60',
weight: 3,
borderWidth: 0
}]
};
new Chart('chart', {
type: 'pie',
data: data,
options: {
borderAlign: 'inner'
},
plugins: [{
id: 'text',
afterDraw: function(chart, a, b) {
let width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
let fontSize = (height / 200).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
let text = '90%',
textX = Math round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}],
});
<div style="width:200px;height:200px"><canvas id="chart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
希望这对您有帮助！
英文:
You can mimic this design by using a pie chart with specific configuration options.
Here is a working example, including the posted plugin code for drawing text in the middle (note that the plugin is changed from beforeDraw to afterDraw to keep the text above the fill segment):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = {
datasets: [{
label: 'outer',
data: [1, 2],
backgroundColor: [
'#27AE60',
'#3333331A'
],
rotation: 210,
circumference: 300,
cutout: '50%',
borderWidth: 0
}, {
// dummy dataset to fill middle.
label: 'inner',
data: [1],
backgroundColor: '#27AE60',
weight: 3,
borderWidth: 0
}]
};
new Chart('chart', {
type: 'pie',
data: data,
options: {
borderAlign: 'inner'
},
plugins: [{
id: 'text',
afterDraw: function(chart, a, b) {
let width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
let fontSize = (height / 200).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "middle";
let text = '90%',
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}],
});
<!-- language: lang-html -->
<div style="width:200px;height:200px"><canvas id="chart"></canvas></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论