apexcharts - 在 ApexCharts 中为 xAxis 类型类别隐藏重叠标签

Question

我有这个 apexcharts 定义，当我得到的不仅仅是例如我系列的 300 个数据样本像这样在 xAxis 上重叠

虽然我更愿意看到这样的东西

选项“hideOverlapLabels”不起作用，因为它只适用于我读过的时间序列。

我知道我可以减少刻度，但我希望图表可以缩放并包含所有数据。有什么方法可以防止标签重叠？

 var options_apex = {
                    series: null,
                    colors: [ '#0054ff', '#FF0000' ,'#FF0000'],
                    chart: {
                        height: 450,
                        type: 'line',
                        zoom: {
                            enabled: true
                        },
                        animations: {
                            enabled: false
                        }
                    },
                    stroke: {
                        width: [3, 3, 3],
                        curve: 'straight'
                    },
                    labels: null,

                    title: {
                        text: "Serial Data",
                        align: 'center',
                        margin: 10,
                        offsetX: 0,
                        offsetY: 0,
                        floating: false,
                        style: {
                            fontSize: '14px',
                            fontWeight: 'bold',
                            fontFamily: undefined,
                            color: '#263238'
                        },
                    },
                    subtitle: {
                        text: "the reckoning",
                        align: 'center',
                        margin: 10,
                        offsetX: 0,
                        offsetY: 20,
                        floating: true,
                        style: {
                            fontSize: '12px',
                            fontWeight: 'normal',
                            fontFamily: undefined,
                            color: '#9699a2'
                        },
                    },

                    xaxis: {
                        type:"category",
                        labels: {
                            rotate: -90,
                            rotateAlways: true,
                            hideOverlappingLabels: true,
                            style: {
                                colors: [],
                                fontSize: '7px',
                                fontFamily: 'Roboto',
                                fontWeight: 100,
                                cssClass: 'apexcharts-xaxis-label',
                            }

                        },
                        axisTicks: {
                            show: true,
                            borderType: 'solid',
                            color: '#78909C',
                            height: 6,
                            offsetX: 0,
                            offsetY: 0
                        },

                        tickAmount: undefined,
                        title: {
                            text: "STEP ID",
                            offsetX: 0,
                            offsetY: 0,
                            style: {
                                color: "#0000ff",
                                fontSize: '12px',
                                fontFamily: 'Helvetica, Arial, sans-serif',
                                fontWeight: 600,
                                cssClass: 'apexcharts-xaxis-title',
                            },
                        }
                    },
                };

Answer 1

我使用了:tickAmount:15，并为我工作，这显示了 15 个值并隐藏了其他值，您也可以尝试应用格式，如果有条件的话，xaxis 有:

                                       formatter: function (value) {
                                               if(value && ((value.split(':')[1][1] === '0') || (value.split(':')[1][1] === '5'))){
                                                    return (value);
                                               }else{
                                                value='';
                                                return('');
                                               }
                                        }