charts - chartjs datalabels 更改饼图中显示的文本的字体和颜色
问题描述
我正在使用图表
和数据标签
我已经从 chartjs 及其插件中实现了我需要的一切。这是我的最终结果
这是我的代码
( function ( $ ) {
"use strict";
/////////////Pie chart START here//////////////////////////////
var ctx = document.getElementById( "pieChart" );
ctx.height = 130;
var myChart = new Chart( ctx, {
type: 'pie',
data: {
datasets: [ {
data: [ 40, 20, 10, 3, 7, 15, 4, 52 ],
backgroundColor: [
"rgba(0,128,128)",
"rgba(255,20,147)",
"rgba(0,0,128)",
"rgba(0,128,0)",
"rgba(128,0,0)",
"rgba(255,0,0)",
"rgba(218,112,214)",
"rgba(70,130,180)"
],
hoverBackgroundColor: [
"rgba(0,128,128)",
"rgba(255,20,147)",
"rgba(0,0,128)",
"rgba(0,128,0)",
"rgba(128,0,0)",
"rgba(255,0,0)",
"rgba(218,112,214)",
"rgba(70,130,180)"
]
} ],
labels: [
"Open",
"On-Hold (Need Spares)",
"In-Process",
"Closed",
"Re-Open",
"On-Hold (Condemnation)",
"On-Hold (For Decision)",
"On-Hold (For Revision)"
]
},
options: {
responsive: true,
legend: {
position: 'left',
labels: {
fontSize:17,
}
}
}
} );
/////////////Pie chart END here//////////////////////////////
} )( jQuery );
现在我需要更改每个饼图中显示的文本(数据)的字体大小和颜色。有什么帮助吗?
ps:我用的是chart.js v2.7.2
解决方案
我使用 Chart js 和 datalebels,并且可以这样做:
plugins: {
datalabels: {
color: #ffffff,
formatter: function (value) {
return Math.round(value) + '%';
},
font: {
weight: 'bold',
size: 16,
}
}
}
当然,在我的示例中,我添加了“%”,这就是我在格式化程序中使用该功能的原因。
请记住,“插件”是图表中“选项”的一部分。
这是插件数据标签的页面,其中包含您可以做的更多事情
推荐阅读
- python - 使用变量和方程 matplotlib 图例
- java - 有没有办法使用 Eclipse GWT 插件将 GWT 2.9 与 Java 11 一起使用?
- asp.net - 如何使用 asp.net 从路径或文件夹下载 PDF 文件
- swift - 如何在 SwiftUI Toggle 中使用自定义图像
- mysql - 从 SQL 中的时间序列数据构建邻接表
- heroku - heroku 在我的 heroku 主页上找到了一个我已删除的旧项目
- python - Dask:如何向 Dask 集群添加安全性 (TLS/SSL)?
- windows-10 - 如何将窗口捕捉到屏幕的上/下半部分
- kubernetes-helm - 如何否定 helm 中的评估/表达式?
- python - 对象创建的存储获取文件未找到错误触发的云功能