ApexCharts轴标签换行后出现重复标签问题求助

你的标签重复问题主要由两个可能原因导致，结合代码和现象给出以下修复方案：

1. 修正代码语法错误 #

你的代码中存在两处尾随逗号问题：

• xaxis.categories数组末尾的多余逗号
• xaxis对象作为options最后一个属性的多余逗号

虽然现代浏览器支持对象/数组末尾的尾随逗号，但部分场景下会引发解析异常，进而导致图表渲染异常。

2. 避免重复渲染图表 #

如果代码中多次调用chart.render()，会在同一个容器中生成多个重叠的图表实例，直接表现为标签重复显示。

修正后的完整代码 #

var options = {
    series: [
        {name: '11', data: [554,182,211,130,190,6,28,0,0,0]},
        {name: '10', data: [268,268,168,145,124,62,17,21,0,0]},
        {name: '9', data: [287,321,164,112,22,47,20,27,0,0]},
        {name: '8', data: [302,363,161,169,31,16,23,66,0,0]},
        {name: '7', data: [362,56,139,111,113,6,14,31,0,1]},
        {name: '6', data: [365,367,182,76,29,0,19,47,0,0]},
        {name: '5', data: [335,455,235,100,116,8,15,21,0,0]},
        {name: '4', data: [288,414,171,5,146,12,28,46,0,0]},
        {name: '3', data: [305,352,257,72,43,113,20,0,7,0]},
        {name: '2', data: [272,109,181,46,295,106,32,0,15,50]},
        {name: '1', data: [342,181,189,64,357,19,26,0,84,23]},
        {name: '0', data: [321,217,151,65,216,12,19,0,100,9]}
    ],
    chart: {
        type: 'bar',
        height: 400,
        width: 800
    },
    xaxis: {
        categories: [
            ['Apples', 'sdf'],
            'Strawberries',
            'Pineapples',
            ['Sugar', 'Baby', 'Watermelon'],
            ['Prickly', 'Pear'],
            'Pears',
            ['Quararibea', 'cordata'],
            'Pomegranates',
            'Tangerines',
            'sasfdsf'
        ]
    }
};

// 确保仅初始化并渲染一次图表
var chart = new ApexCharts(document.querySelector("#your-chart-container"), options);
chart.render();

额外检查点 #

• 确认页面中仅存在一个ID为your-chart-container的DOM元素，避免重复容器导致的渲染冲突
• 检查代码逻辑，确保chart.render()仅被调用一次
• 建议使用最新稳定版的ApexCharts，避免旧版本的已知bug

内容的提问来源于stack exchange，提问作者Max