我正在为应用程序制作仪表板页面，但它并不有趣。
就像图表上的颜色都是一样的。我想让图形上的颜色不同，使其看起来有趣。
如何使图形的颜色与 Angular 不同？
.ts 中的脚本
this.chartJabatan = {
series: [
{
name: "Jabatan",
data: this.dataJabatan
}
],
colors: ['#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4',
'#90ee7e', '#f48024', '#69d2e7'
],
chart: {
type: "bar",
height: 450
},
plotOptions: {
bar: {
horizontal: true,
dataLabels: {
position: "top"
}
}
},
theme: {
palette: 'palette1' // upto palette10
},
dataLabels: {
enabled: true,
offsetX: -6,
style: {
fontSize: "12px",
colors: ["#fff"]
}
},
stroke: {
show: true,
width: 1,
colors: ["#fff"]
},
xaxis: {
categories: this.labelJabatan
}
};
.html 中的脚本
<div class="flex flex-row">
<div class="ml-4 p-6 pr-3 pb-3 bg-card rounded-2xl shadow mt-4 mr-4"
style="height: 685px; margin-left: -25px; width: 100%;">
<div class="flex items-start justify-between">
<div class="text-lg font-medium tracking-tight leading-6 truncate">Level</div>
</div>
<div class="flex flex-col flex-auto mt-6 h-full w-full" id="chartJabatan">
<apx-chart [series]="chartJabatan.series" [chart]="chartJabatan.chart"
[dataLabels]="chartJabatan.dataLabels" [plotOptions]="chartJabatan.plotOptions"
[xaxis]="chartJabatan.xaxis" [stroke]="chartJabatan.stroke" [colors]="chartJabatan.colors">
</apx-chart>
</div>
</div>
</div>
最佳答案
要为每个条形提供不同的颜色，您必须将分布式属性设置为true
plotOptions: {
bar: {
horizontal: true,
distributed: true,
},
},
演示于stackblitz
关于angular - 如何在 apexchart 上赋予不同的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74260016/