要根据缩放级别对日期/柱状条进行分组或聚类,您可以使用ApexCharts的grouping
属性。
以下是一个示例代码,展示了如何使用ApexCharts实现该功能:
var options = {
chart: {
type: 'bar',
height: 350,
width: '100%',
},
series: [{
name: 'Sales',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
type: 'datetime',
categories: ['2021-01-01', '2021-02-01', '2021-03-01', '2021-04-01', '2021-05-01', '2021-06-01', '2021-07-01', '2021-08-01', '2021-09-01'],
labels: {
datetimeFormatter: {
year: 'yyyy',
month: 'MMM \'yy',
day: 'dd MMM',
}
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '55%',
endingShape: 'rounded'
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$" + val + " thousands"
}
}
},
grouping: {
enabled: true,
forced: true,
groupBy: 'year', // 可以是 'year', 'month', 'day' 等
groupDateTimeOffset: 0,
groupIntervalFunc: undefined,
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在上面的代码中,我们首先定义了基本的ApexCharts配置,如图表类型、数据、x轴的日期格式等。然后,我们使用grouping
属性启用了分组功能,并设置了分组的级别为年份(groupBy: 'year'
)。您可以根据需要将其更改为其他级别,如月份(groupBy: 'month'
)或天数(groupBy: 'day'
)等。