使用Apex Charts的dataLabel配置项中的style属性来控制数据标签中文本的对齐方式。具体实现代码如下:
var options = {
chart: {
type: 'bar',
height: 380
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}],
dataLabels: {
style: {
fontSize: '12px',
fontFamily: 'Helvetica, Arial, sans-serif',
textAlign: 'center',
color: '#fff'
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在上例代码中,我们使用dataLabels.style.textAlign属性来设置数据标签文本的对齐方式为居中对齐。其他常见的对齐方式还有left和right。也可以通过调整样式属性如margin、padding等来进一步控制数据标签的对齐效果。