charts - chartjs 将百分比添加到饼图图例
问题描述
将百分比值添加到图例标签的最简单方法是什么?
我相信它会使用 generateLabels: function (chart) {},任何人都可以提供一个干净的例子吗?
解决方案
似乎没有任何本地方式来显示百分比,但是计算并将它们设置为标签非常简单:
const data = [1, 2, 3],
// ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
total = data.reduce((accumulator, currentValue) => accumulator + currentValue),
// ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
labels = data.map(value => Math.round((value / total) * 100) + '%');
new Chart(document.getElementById('chart'), {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data
}]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart" height="75"></canvas>
(注意:使用Math.round()
可能会导致某些数字集在求和时不等于 100%。)
推荐阅读
- javascript - 如何连续 20 个月每月显示一条新消息
- javascript - 是否可以通过 Cloud Functions 一次为 Firestore 调用多个更新查询?
- python - 如何通过Pycharm等外部应用程序连接docker中的Oracle数据库?
- amazon-web-services - 解析 HTTP 404 响应正文的 Docker AWS ECR 错误:顶级值后的无效字符“p”:“未找到 404 页面\n”
- r - R不使用download.file下载总tar.gz
- php - 如何在 MySQL 中过滤 Select
- asp.net-core - 将字节数组转换为图像 asp.net 核心时出错
- javascript - 在 NgOnInit 和 NgAfterViewInit 上执行的链接任务
- angular - Angular 7 缓存 API 结果
- c++ - 在 C++ 中输出参数与返回值