在 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

我想我找到了解决办法

  xaxis: {
                        type:"category",
                        tooltip: {
                            enabled: false,
                            formatter: undefined,
                            offsetY: 0,
                            style: {
                                fontSize: 0,
                                fontFamily: 0,
                            },
                        },
                        labels: {
                            rotate: -45,
                            rotateAlways: true,
                            hideOverlappingLabels: true,
                            style: {
                                colors: [],
                                fontSize: '6px',
                                fontFamily: 'Roboto',
                                fontWeight: 80,
                                //cssClass: 'apexcharts-xaxis-label',
                            },
                            axisTicks: {
                                show: true,
                                borderType: 'solid',
                                color: '#78909C',
                                height: 6,
                                offsetX: 0,
                                offsetY: 0
                            },

                        },

使用此设置和设置不是标签而是类别

options_apex.xaxis.categories = 标签；

事情似乎没有重叠。