我有下面的条形图。下面是它的javascript选项:
public chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
labels: {
fontColor: "black",
fontSize: 12,
},
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
};
下面是html:
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[plugins]="[]"
[legend]="true"
[chartType]="'bar'"
height="300px"
>
</canvas>
有时数据标签会出现在条形图上(见图),但我不知道如何改变颜色使它们变成白色。有人知道吗?
最新消息:
下面是使用新chartOptions的图表,但数据标签的颜色仍然不变:
chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
plugins: {
labels: {
fontColor: "white",
fontSize: 12,
},
},
};
2条答案
按热度按时间cgyqldqp1#
我认为这个问题是因为你在图例配置中添加了baels插件配置。
它应该是:
hfyxw5xn2#
这个问题是由于我的“chartsjs-plugin-data-labels”插件造成的。通过将这个插件添加到数据集数组中修复了这个问题。