angular - 如何为条形图primiNg数据集中的每个颜色条设置不同的标签
问题描述
我正在研究 PrimeNg 条形图我在根据条形的不同背景颜色设置数据集标签时遇到问题。我只有一个数据集,但每个颜色条代表不同的数据,那么如何为 PrimeNg 条形图中的每个颜色条设置不同的标签,我们可以使用自己的 html 自定义图例以根据颜色设置标签吗?
this.basicData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset', (<- wanted to update this label with like [Data1,Data2,Dat3....]
backgroundColor: [
'#EC407A',
'#AB47BC',
'#42A5F5',
'#7E57C2',
'#66BB6A',
'#FFCA28',
'#26A69A'
],
data: [65, 59, 80, 81, 56, 55, 15]
}
]
};
this.chartOptions = {
plugins: {
legend: {
labels: {
color: '#ebedef'
}
}
},
scales: {
x: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(255,255,255,0.2)'
}
},
y: {
ticks: {
color: '#ebedef'
},
grid: {
color: 'rgba(255,255,255,0.2)'
}
}
}
};
HTML CODE:
<div class="card ">
<h5>Month Vs Data</h5>
<p-chart type="bar" [data]="basicData" [options]="chartOptions"></p-chart>
</div>
解决方案
推荐阅读
- matplotlib - 使用 imshow 更改 y 轴和 x 轴标签是否会更改图像中的任何内容?
- javascript - JS 保持日期相差 1 分钟
- javascript - 我可以将值传递给兄弟组件而不将其保存为变量吗?
- python - 如何在 python selenium 中自动化 datepicker?
- reactjs - React 日期选择器:如何测试用户输入的有效性?
- php - Foreach 循环仅回显第一次出现(仅第一个元素)
- javascript - 如何在 jest 框架自动化中使用 `scollIntoView` 方法
- python - create_engine 使用 ssl 问题 sqlalchemy
- bash - 是否可以在 bash 中的 case 选择器中使用花括号?
- php - 在codeigniter中如何划分时间