javascript - 将甜甜圈饼图显示为圆形进度 Chart.js
问题描述
我想问是否有一种方法可以将饼图制作为具有百分比值的圆形进度,我只想要一个像这样着色的切片:
这是我的小提琴,现在我只想要一个数据。
HTML:
<canvas id="chartProgress" width="300px" height="200"></canvas>
JS:
var chartProgress = document.getElementById("chartProgress");
if (chartProgress) {
var myChartCircle = new Chart(chartProgress, {
type: 'doughnut',
data: {
labels: ["Africa", 'null'],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#5283ff"],
data: [68, 48]
}]
},
plugins: [{
beforeDraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 150).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.fillStyle = "#9b9b9b";
ctx.textBaseline = "middle";
var text = "68%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}],
options: {
legend: {
display: false,
},
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 85
}
});
}
我知道我可以使用普通的 HTML 和 CSS 或使用简单的插件来做到这一点,但我想使用 Chart.js 来做到这一点
解决方案
插件核心 API提供了不同的钩子,可用于执行自定义代码。您已经使用beforeDraw
钩子在甜甜圈中间绘制文本。
您现在还可以使用beforeInit
挂钩来修改图表配置以满足您的需求:
beforeInit: (chart) => {
const dataset = chart.data.datasets[0];
chart.data.labels = [dataset.label];
dataset.data = [dataset.percent, 100 - dataset.percent];
}
鉴于此代码,您的定义dataset
看起来很简单,如下所示:
{
label: 'Africa / Population (millions)',
percent: 68,
backgroundColor: ['#5283ff']
}
最后,您必须定义 a tooltips.filter
,以便工具提示仅出现在相关段中。
tooltips: {
filter: tooltipItem => tooltipItem.index == 0
}
请查看您修改后的代码,看看它是如何工作的。
var myChartCircle = new Chart('chartProgress', {
type: 'doughnut',
data: {
datasets: [{
label: 'Africa / Population (millions)',
percent: 68,
backgroundColor: ['#5283ff']
}]
},
plugins: [{
beforeInit: (chart) => {
const dataset = chart.data.datasets[0];
chart.data.labels = [dataset.label];
dataset.data = [dataset.percent, 100 - dataset.percent];
}
},
{
beforeDraw: (chart) => {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontSize = (height / 150).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.fillStyle = "#9b9b9b";
ctx.textBaseline = "middle";
var text = chart.data.datasets[0].percent + "%",
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(text, textX, textY);
ctx.save();
}
}
],
options: {
maintainAspectRatio: false,
cutoutPercentage: 85,
rotation: Math.PI / 2,
legend: {
display: false,
},
tooltips: {
filter: tooltipItem => tooltipItem.index == 0
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chartProgress"></canvas>
推荐阅读
- android - Error in OnActivityResult after taking picture
- google-chrome - How to highlight all instances of a string using Chrome's Text Fragments feature?
- django - How to get static files in javascript?
- python - MIDI, how to get measures and notes
- java - What's the COMPLETE way to request the user to enable accessibility services?
- elasticsearch - Elasticsearch: count rows in a table
- python - Python Tkinter create label with text of pressed button
- excel - Scraping Webpage Tables Data Using VBA
- facebook - 通过 Facebook Marketing API 管理多个广告帐户的数据
- python - 用函数制作评分计算器?