甜甜圈Chart.JS中是否有办法显示100％
o
我有一个显示数字的甜甜圈图。但是，有一种方法可以使甜甜圈图超出100％，因此我在本data节中给出的数字是：例如21，将显示100％中的21％完成吗？
显示所需结果的图像： 
因此，甜甜圈环为灰色，彩色部分表示已完成多少（或我们为该data部分分配的编号，我一直在查看文档，但看不到可以完成的方式？
我目前拥有的代码：
<canvas id="Chart1" style="width=5 height=5"></canvas>
<?php
$var = 3;
?>
var ctx = document.getElementById('Chart1').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'doughnut',
// The data for our dataset
data: {
labels: ['% Complete'],
datasets: [{
label: 'chart1',
backgroundColor: 'rgb(102, 178, 255)',
borderColor: 'rgb(102, 178, 255)',
// Below I just pull out 1 number from the db
data: [<?php echo $var ?>]
}]
},
});
我的代码输出以下内容（因此3个填充了整个甜甜圈），而我希望它显示100％完成率中的3％。
jar
尝试传递[3，97]的数据。您正在尝试将其用作加载指示器，但它似乎旨在显示100％破碎的零件。
如果您只是简单地通过[3]，那么那就是您数据集的100％
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带有圆角的Chart.js甜甜圈
- 2
Chart.js v2：甜甜圈内甜甜圈之间的空间
- 3
Chart.js甜甜圈图无法正常工作
- 4
Chart.js设置甜甜圈背景色？
- 5
Chart.js甜甜圈文本颜色
- 6
如何在Chart.js中的甜甜圈图上显示标签
- 7
如何在Chart.js甜甜圈图上显示第二组标签？
- 8
Chart.js - 甜甜圈显示活动段工具提示（点击外部按钮）
- 9
Chart.JS：当甜甜圈大小足以容纳文本时，如何仅显示数据标签？
- 10
在Chart.js甜甜圈图上检测onHover是否完成
- 11
具有最小高度的响应式Chart.js甜甜圈图
- 12
在混合图表中Chart.js不同的甜甜圈厚度
- 13
jq图不显示甜甜圈
- 14
圆角边缘和文本居中的Chart.js甜甜圈
- 15
如何更改chart.js甜甜圈图上的鼠标光标？
- 16
使用Chart.js-为甜甜圈图创建图例
- 17
使用chart.js在甜甜圈图中心进行事件处理程序
- 18
如何添加到chart.js（甜甜圈图）的链接？
- 19
Chart.js使用文本工具提示问题扩展了甜甜圈
- 20
Chart.js 2.0甜甜圈工具提示百分比
- 21
如何使用Chart.js在甜甜圈图的中心添加文本？
- 22
如何在Chart.js的甜甜圈图中使用径向CanvasGradients？
- 23
如何在Chart.js的甜甜圈图中使用径向CanvasGradients？
- 24
如何在Chart.JS的半个甜甜圈图中添加一些文本？
- 25
通过chart.js在多系列甜甜圈图中添加标签
- 26
Chart.js：甜甜圈中间的千位分隔符和标题
- 27
Chart.js甜甜圈动画/顺时针绘制
- 28
如何在Angular Chart中的甜甜圈图中添加标题？
- 29
甜甜圈图表中的Angular-Chart细分选项
我来说两句