我正在使用chartjs
和数据标签
我已经从 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 );
现在我需要更改饼图每个切片内显示的文本(数据)的字体大小和颜色。有什么帮助吗?
P.s:我使用的是chart.js v2.7.2
我使用 Chart js 和 datalebels 来,并且可以这样做:
plugins: {
datalabels: {
color: #ffffff,
formatter: function (value) {
return Math.round(value) + '%';
},
font: {
weight: 'bold',
size: 16,
}
}
}
当然,在我的示例中,我添加了“%”,这就是我在格式化程序中使用该函数的原因。
请记住,“插件”是图表中“选项”的一部分。
这里是插件数据标签的页面,其中包含您可以执行的更多操作
如果你想更改字体系列,那么你可以这样做:
添加字体系列,例如添加“Josefin Sans”字体系列
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Josefin+Sans">
然后在字体 JSON 对象中提及
family: 'Josefin Sans'
。像这样:-
plugins: {
datalabels: {
color: #ffffff,
formatter: function (value) {
return Math.round(value) + '%';
},
font: {
weight: 'bold',
size: 16,
family: 'Josefin Sans',
}
}
}
要更改您可以使用的每个数据集的颜色
{
data: {
datasets: [
{
datalabels: {
labels: {
value: {
color: 'green'
}
}
}
}]
}
发现它很有帮助https://chartjs-plugin-datalabels.netlify.app/guide/labels.html#dataset-overrides
在我的例子中,为了使其工作,我必须在颜色值中添加引号:
color: "#ffffff",
plugins: {
datalabels: {
color: "#ffffff",
formatter: function (value) {
return Math.round(value) + '%';
},
font: {
weight: 'bold',
size: 16,
}
}
}
继续2018年12月28日11:41的回答 桑迪·韦利兹 67088 银徽章16
如果您仍然看不到该值,请在选项之外添加另一个插件,如下所示
plugins: [ChartDataLabels]
现在你将有 2 个插件,一个在内部,另一个在外部,如上所述
还要确保您以正确的顺序导入了正确的脚本文件,因为第二个脚本文件之前需要第一个脚本文件;
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>