有没有办法实现chart.js甜甜圈图表的动画指示器?我希望完成的看起来像这样:
我已经完成了图表的甜甜圈部分,但似乎找不到添加值的方法(大文本:89%(动态))或指示器的点。
我使用的代码如下:
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
}
});
任何帮助都非常感谢!
2条答案
按热度按时间fhity93d1#
为了让你开始,我能够得到一个半甜甜圈,或者我如何称呼它,速度表图,使用以下选项配置:
chartjs版本3.5.1
mm5n2pyu2#
原始答案:
我不确定是否有一个快速而简单的解决方案。
也许你可以直接在现有的饼图上创建第二个饼图,并使该饼图只有几个像素的周长,但旋转了X %,在这种情况下,89%。需要一些数学来计算出89%的半个圆在哪里。这不会像上面的图片那样给予你一个漂亮的圆圈标记。它会给予你一个小的彩色部分,圆圈标记应该和一些css的帮助下,这第二个饼图部分可以四舍五入,看起来像你想要的。
第二个饼图可能看起来像这样。。
至于大的89%,可能会涉及css。定位文本直接'前面'的饼图(涉及的东西,如z索引和位置绝对)
新答案:
也许你可以直接在现有的圆环图上创建一个圆环图,并让圆环图的第一个和第三个“条形图”的不透明度为0,这样它们就看不见了。如果第一个条形图的值为88.5,第二个条形图的值为1,第三个条形图的值为10.5,你就可以有效地将第二个条形图的不透明度设置为89%,宽度为1%(88.5 + 1 + 10.5 = 100)。
至于大的89%,可能会涉及css。定位文本直接'前面'的饼图
在尝试了一把小提琴之后,我得到了这个...
示例如下:
https://jsfiddle.net/rjtsbeLc/3/
请注意,使用相对和绝对定位,我将第二个圆环图放置在现有圆环图的顶部,百分比文本位于它们顶部的中心底部。
这不是你正在寻找的“圆”是矩形的,但我遇到了这个,它可能会帮助你解决如何将矩形四舍五入成一个圆…
Chart.js圆边甜甜圈https://stackoverflow.com/a/36964890/5178301