我正在使用this post中的信息为Microsoft Teams机器人制作饼图,但不知道如何在图表上显示每个部分的百分比。有办法吗?
我尝试在每个部分添加一个“label”属性以及“value”和“color”,因为我在source code for nchart中看到“label”用于圆环图。我尝试将“label”设置为几个不同的值,包括每个部分的百分比、它所代表的内容的名称等。下面是我的饼图数据代码:
const colorArr = ["#29C5F6", "#D4CCC5", "#949FB1", "#ff0080", "#8A2BE2", "#3CB043", "#ED7014", "#FCAE1E"]
const valueArr = [50, 100, 40, 75, 25]
for (let i = 0; i < valueArr.length; i++) {
pieChartSectionArr[i] = {
"value": valueArr[i],
"color": colorArr[i],
"label": valueArr[i]
}
}
这根本没有改变我的图表,甚至当我试图复制链接的示例时,圆环图也没有显示任何标签。我希望在每个部分的顶部显示一些文本。
1条答案
按热度按时间6fe3ivhb1#
编辑:我现在看到你在标题中提到了
nchart
;下面的解决方案基于标准chart.js(最新版本);它可以很好地与使用node-canvas
的节点配合使用-这是一个与您提到的旧问题的答案类似的设置。不幸的是,
nchart
绑定到chart.js
的(非常)旧版本,该版本与插件不兼容,也与chart.js
的许多其他新特性不兼容。要使用
npm
运行以下代码,请在使用npm init
创建项目后,将代码保存到index.js
,然后保存到npm install chart.js
、npm install chartjs-plugin-datalabels
和npm install canvas
。现在有了
chartjs-plugin-datalabels
插件,它可以很好地在饼图切片上添加标签。下面是一个简单的例子: