使用ApexCharts库实现分组堆叠图的图例分组标签。
解决这个问题需要使用ApexCharts库的legend对象的单个标签选项来实现。可以设置每个标签需要使用的文本并将它们组合成简单的数组,然后将这些数组分配给legend对象的labels选项。代码示例如下:
const options = {
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%',
},
plotOptions: {
bar: {
horizontal: false,
grouped: true,
},
},
series: [{
name: '实际产量',
data: [44, 55, 41, 67, 22, 43],
},{
name: '目标产量',
data: [13, 23, 20, 8, 13, 27]
},{
name: '计划产量',
data: [11, 17, 15, 15, 21, 14]
}],
xaxis: {
categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
},
legend: {
labels: {
useSeriesColors: true,
seriesName: ['实际', '目标', '计划'],
}
}
}
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
这会在图例中创建三个分组标签,每个分组标签都是由具有不同名称的系列名组成的。使用useSeriesColors选项可以确保在每个系列颜色相同的情况下,相应的系列颜色也会自动应用于标签。
注意:这种方法只适用于使用堆叠组合图形式呈现的图表,而不适用于使用其他类型的图形式呈现的图表。