X 軸標題顯示在不同裝置下不同

[a31367950]

這是我在iphone6 OS 12.5.7 中顯示的圖表

這是我預期的樣式，而決大部分比較新的設備也都按照這樣式顯示，就是最靠右這個標題有顯示

兩張圖中不一樣的地方就是，實際上我有給最右邊的X軸標題，但在iphone6上沒有顯示
下面是我的aaOption的組裝方式

chartModel.xAxisData = ["2022/9", "", "", "", "2023/1", "", "", "", "", "", "", "2023/8"]

let aaChartModel = AAChartModel()
        aaChartModel
            .tooltipEnabled(false)

        let aaTitle = AATitle()
            .text("")

        let aaYAxisLabels = AALabels()
            .enabled(true)// 设置 y 轴是否显示数字
            .formatter(#"""
            function () {
            var yValue = this.value;
            if (yValue >= 1000000000) {
            return (yValue / 1000000000).toFixed(1).replace(/\.0$/, '') + 'G';
            }
            if (yValue >= 1000000) {
            return (yValue / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
            }
            if (yValue >= 1000) {
            return (yValue / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
            }
            return yValue;
            }
            """#)
            .style(AAStyle()
            .color("#2B282F")// yAxis Label font color
            .fontSize(12)// yAxis Label font size
            .fontWeight(.bold)// yAxis Label font weight
        )

        let aaTrailingYAxisLabels = AALabels()
            .enabled(true)// 设置 y 轴是否显示数字
            .format("{value:.,0f}%")
            .style(AAStyle()
                .color("#2B282F")// yAxis Label font color
                .fontSize(12)// yAxis Label font size
                .fontWeight(.bold)// yAxis Label font weight
        )

        let aaXAxis = AAXAxis()
            .visible(true)
            .min(0)
            .categories(chartModel.xAxisData)
            .labels(aaYAxisLabels)

        let yAxisOne = AAYAxis()
            .visible(true)
            .labels(aaYAxisLabels)
            .title(aaTitle.text(nil))
            .tickInterval(10000)

        let yAxisTwo = AAYAxis()
            .visible(true)
            .labels(aaTrailingYAxisLabels)
            .title(aaTitle.text(""))
            .opposite(true)
            .tickInterval(5.0)

        let aaTooltip = AATooltip()
            .enabled(false)
            .shared(false)

        let aaMarker = AAMarker()
            .radius(4)// 曲线连接点半径，默认是4
            .symbol(.circle)// 曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
            .fillColor(AAColor.white)// 点の填充色(用来设置折线连接点の填充色)
            .lineWidth(2)// 外沿线の宽度(用来设置折线连接点の轮廓描边の宽度)
            .lineColor("")// 外沿线の颜色(用来设置折线连接点の轮廓描边颜色，当值为空字符串时，默认取数据点或数据列の颜色)

        let elementLeading = AASeriesElement()
            .type(.column)
            .color(AAColor.rgbaColor(115, 46, 245))
            .yAxis(0)
            .data(chartModel.mainYAxisData)
            .allowPointSelect(false)

        let elementTrailing = AASeriesElement()
            .type(.line)
            .color(AAColor.rgbaColor(255, 138, 0))
            .marker(aaMarker)
            .yAxis(1)
            .data(chartModel.subYAxisData)
            .allowPointSelect(false)

        let aaOptions = aaChartModel.aa_toAAOptions()
            .title(aaTitle)
            .xAxis(aaXAxis)
            .yAxisArray([yAxisOne, yAxisTwo])
            .tooltip(aaTooltip)
            .series([elementLeading, elementTrailing])
            .legend(AALegend().enabled(false))

        aaOptions.plotOptions?.series?
            .animation(false)
        
        return aaOptions

先謝謝開發者的撥冗回答

[AAChartModel]

这个可能是 Highcharts 为了避免 X 轴的文字标签过于拥挤而自动隐藏的功能. 在这里可能起了副作用.

试试设置一下 X 轴的 labels 属性对象的 AALabels 的属性 allowOverlap 为 true 看看效果

[AAChartModel]

或者试试将图表的 marginBottom 设置的大一些, 让图表底部有足够的空间显示 X 轴的标签文字.

[a31367950]

謝謝您的回覆，但看起來這兩個方法都沒有辦法修復這個issue。

[AAChartModel]

问:

Highcharts 怎么强制设置 X轴的 Labels 全部显示?

以下是 ChatGPT 的回答:

答案 1:

在 Highcharts 中，可以通过设置 xAxis.labels.staggerLines 属性来强制显示 X 轴的所有标签。

默认情况下，Highcharts 会根据可用的空间自动隐藏一些 X 轴标签，以避免标签重叠。但是，如果你希望强制显示所有的标签，可以将 staggerLines 属性设置为一个较大的值，以确保所有标签都能够显示出来。

以下是一个示例代码，展示如何设置 staggerLines 属性来强制显示 X 轴的所有标签：

Highcharts.chart('container', {
    // 图表配置项...
    xAxis: {
        // X 轴配置项...
        labels: {
            staggerLines: 1 // 设置为一个较大的值，以强制显示所有标签
        }
    },
    // 数据系列配置项...
});

在上面的示例中，我们将 staggerLines 属性设置为 1，这将强制显示所有的 X 轴标签。你可以根据需要调整这个值，以适应你的图表布局和标签长度。

请注意，上述示例是使用 JavaScript 编写的，如果你需要在其他编程语言中使用 Highcharts，你需要相应地调整代码。

答案 2:

在 Highcharts 中，要强制设置 X 轴的标签（Labels）全部显示，你可以使用 xAxis.labels 下的 step 属性来实现。step 属性定义了 X 轴标签的显示步幅，通过将其设置为一个较大的值，可以确保所有标签都被显示出来。

以下是一个示例配置，展示如何在 Highcharts 图表中强制显示所有 X 轴标签：

Highcharts.chart('container', {
    xAxis: {
        categories: ['Label 1', 'Label 2', 'Label 3', /* ... */, 'Label N'],
        labels: {
            step: 1 // 设置 step 属性为 1，显示所有标签
        }
    },
    // 其他配置项...
    series: [{
        // 数据系列配置...
    }]
});

在上述示例中，将 step 属性设置为 1 可以确保所有 X 轴标签都会被显示出来，无论标签的数量有多少。你只需要将 categories 数组替换为你实际的标签文本数组，然后将其他图表配置项进行适当的设置。

需要注意的是，如果你的标签数量非常多，强制显示所有标签可能会导致标签之间重叠，造成可读性问题。在这种情况下，你可能需要考虑其他的标签显示方案，比如旋转标签、间隔显示等，以便更好地展示标签信息。

[AAChartModel]

回到 AAChartKit-Swift 中, X 轴的 labels 属性对象 AALabels 的相关配置, 参考:

public class AALabels: AAObject {
    ...
    ...
    public var staggerLines: Int? // Only valid for the horizontal axis, define the number of lines displayed on the axis label.
    public var step: Int? // Display multiple labels of n. For example, setting to 2 means that the labels are displayed one axis label apart. By default, in order to avoid the axis labels being overwritten, this parameter is automatically calculated according to the situation. You can prevent automatic calculations by setting this parameter to 1.
    ...
    ...
}

对应的英文在线文档:

• staggerLines https://api.highcharts.com/highcharts/xAxis.labels.staggerLines
• step https://api.highcharts.com/highcharts/xAxis.labels.step