要为Apexcharts的每个类别的柱状图设置不同的颜色,可以使用plotOptions
选项中的bar
属性来设置。
以下是一个示例代码,展示了如何使用Apexcharts为每个类别的柱状图设置不同的颜色:
// 数据
var options = {
series: [{
name: '销售',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
chart: {
type: 'bar',
height: 350
},
plotOptions: {
bar: {
columnWidth: '50%',
colors: {
ranges: [{
from: 0,
to: 30,
color: '#FF0000' // 颜色1
}, {
from: 31,
to: 60,
color: '#00FF00' // 颜色2
}, {
from: 61,
to: 100,
color: '#0000FF' // 颜色3
}]
}
}
},
xaxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
}
};
// 初始化图表
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在上面的示例代码中,我们使用了plotOptions
选项中的bar
属性,并在其中设置了colors
属性。colors
属性是一个对象,其中的ranges
属性是一个数组,每个元素表示一个颜色范围,包含from
、to
和color
属性。我们可以根据需要设置多个颜色范围,并为每个范围设置不同的颜色。
在上面的示例中,我们设置了三个颜色范围,分别是0-30、31-60和61-100。对应的颜色分别是红色、绿色和蓝色。
通过这种方式,我们就可以为每个类别的柱状图设置不同的颜色。
上一篇:Apexcharts基准值