Chart.js的半甜甜圈图 [英] Half Doughnut Chart with Chart.js
问题描述
无论如何，有没有为chart.js甜甜圈图实现动画指示符?我要完成的工作是这样的:
Is there anyway to implement an animated indicator for chart.js doughnut charts? What I am looking to accomplish looks like this:
我已经完成了图表的甜甜圈部分，但是似乎找不到找到增加值(大文本:89％(动态))或指标点的方法.
I've got the doughnut part of the chart complete, but can't seem to find a way to add the value (large text: 89% (dynamic)) or the dot for the indicator.
我使用的代码如下:
HTML
<canvas id="dashboardChart" width="400" height="400"></canvas>
JS
var ctx = document.getElementById("dashboardChart");
var dashboardChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Red", "Orange", "Green"],
datasets: [{
label: '# of Votes',
data: [33, 33, 33],
backgroundColor: [
'rgba(231, 76, 60, 1)',
'rgba(255, 164, 46, 1)',
'rgba(46, 204, 113, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 5
}]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 95
}
});
任何帮助将不胜感激！
推荐答案
我将所有三个元素(CSS，Javascript和html)组合在一起，以便能够将其放入我的wix网站，但是该网站无法正常工作.任何人都知道为什么它不起作用，因为在编辑器中 https://jsfiddle.net/rjtsbeLc/3/它很好用.
I combinded all three Elements (CSS, Javascript, html) in order to be able to put it into my wix Website, which however did not work. Anyone has an idea why it doesnt work, since in the editor https://jsfiddle.net/rjtsbeLc/3/ it works just fine.
<head>
<style type= "text/css">
.outer {
position: relative;
width: 600px;
height: 400px;
}
canvas {
position: absolute;
}
.percent {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
font-size: 80px;
bottom: 0;
}
</style>
</head>
<body>
<div class="outer">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<canvas id="secondContainer" width="600" height="400"></canvas>
<p class="percent">
89%
</p>
</div>
<script>
var options1 = {
type: 'doughnut',
data: {
labels: ["Red", "Orange", "Green"],
datasets: [
{
label: '# of Votes',
data: [33, 33, 33],
backgroundColor: [
'rgba(231, 76, 60, 1)',
'rgba(255, 164, 46, 1)',
'rgba(46, 204, 113, 1)'
],
borderColor: [
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)',
'rgba(255, 255, 255 ,1)'
],
borderWidth: 5
}
]
},
options: {
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltip: {
enabled: false
},
cutoutPercentage: 95
}
}
var ctx1 = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx1, options1);
var options2 = {
type: 'doughnut',
data: {
labels: ["", "Purple", ""],
datasets: [
{
data: [88.5, 1,10.5],
backgroundColor: [
"rgba(0,0,0,0)",
"rgba(255,255,255,1)",
"rgba(0,0,0,0)",
],
borderColor: [
'rgba(0, 0, 0 ,0)',
'rgba(46, 204, 113, 1)',
'rgba(0, 0, 0 ,0)'
],
borderWidth: 3
}]
},
options: {
cutoutPercentage: 95,
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
legend: {
display: false
},
tooltips: {
enabled: false
}
}
}
var ctx2 = document.getElementById('secondContainer').getContext('2d');
new Chart(ctx2, options2);
</script>
</body>
这篇关于Chart.js的半甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
