chart.js - 如何在chart.js中将图像添加到圆环图的切片中?
问题描述
我需要使用chart.js
在特定圆环图切片的中心添加一个简单的图标图像(警告)......不幸的是,我在官方文档中没有找到任何用于此目的的配置选项。
您可以通过以下链接查看我需要的结果示例。
有没有好心人可以帮助我?
解决方案
这可以使用chartjs-plugin-labels完成,如下所示:
var myChart = new Chart(document.getElementById('myChart'), {
type: 'doughnut',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
data: [11, 39, 20],
backgroundColor: ['#ffb74d', '#4db6ac', '#bf360c']
}]
},
options: {
responsive: true,
plugins: {
labels: {
render: 'image',
images: [
null,
null,
{
src: 'https://i.stack.imgur.com/9EMtU.png',
width: 20,
height: 20
}
]
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<canvas id="myChart" height="100"></canvas>
推荐阅读
- python - 熊猫为索引旋转多个值
- azure - 临时禁用 azure 活动日志警报
- java - 扫描仪输入的Netbeans java平台shell问题
- flutter - 根据键值之一从映射中检索条目
- background - Ionic 4——背景过渡
- c# - 如果使用继承,如何分配内存?
- c# - 如何监控外部流程(最简单的方法)
- python - 找到两个列表 x 和 y 之间的所有配对组合,使得 y 中的所有元素都与 x 中的一个元素配对
- algorithm - 为什么这个 F# 序列表达式是立方时间而不是线性的?
- mysql - A Database Error Occurred 错误编号:1064 WH'at line 14