根据官方文档提供的解决方案,可以使用“数据标签旋转”、“数据标签偏移”、“仅显示每组数据点的第一个数据标签”三种方式解决Apex图表中的数据标签重叠问题。
下面是代码示例:
1.使用数据标签旋转
chart: { height: 350, type: 'bar', events: { dataLabelsClick: function(event, chartContext, config) { console.log(event, chartContext, config) } } }, dataLabels: { enabled: true, rotation: -45, offsetY: -25, style: { fontSize: '12px', colors: ['#304758'] } }
2.使用数据标签偏移
chart: { height: 350, type: 'bar', events: { dataLabelsClick: function(event, chartContext, config) { console.log(event, chartContext, config) } } }, dataLabels: { enabled: true, offsetX: 30, offsetY: -25, style: { fontSize: '12px', colors: ['#304758'] } }
3.仅显示每组数据点的第一个数据标签
chart: { height: 350, type: 'bar', events: { dataLabelsClick: function(event, chartContext, config) { console.log(event, chartContext, config) } } }, dataLabels: { enabled: true, distributed: true, offsetX: 0, offsetY: -15, style: { fontSize: '12px', colors: ['#304758'] } }, plotOptions: { bar: { dataLabels: { hideOverflowingLabels: false } } }