You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Swift中Highcharts横向柱状图如何设置固定x轴与双y轴取值?

iOS Highcharts 双Y轴横向柱状图固定刻度实现方案

横向柱状图(HIBar类型)默认开启坐标轴反转,你之前配置不生效的核心原因大概率是混淆了反转后的轴对应关系:反转后垂直方向的是x轴、水平方向的是y轴,你需要的上下双轴实际是两个水平方向的y轴。以下是可直接复用的配置方案:


1. 垂直方向x轴(分类文本)配置

你需要的x轴取值[text1,text2,text3,text4,text5]是垂直方向的分类轴,直接配置categories+固定min/max即可:

let xAxis = HIXAxis()
// 固定分类文本
xAxis.categories = ["text1", "text2", "text3", "text4", "text5"]
// 固定显示所有5个分类,不会因数据自动裁剪
xAxis.min = 0
xAxis.max = 4
xAxis.visible = true

2. 顶部数值Y轴配置

顶部需要的固定数值刻度[0,200,400,600,800,1000],通过设置线性类型+固定间隔+min/max实现:

let topYAxis = HIYAxis()
// 设为true将轴放到反转后的顶部位置
topYAxis.opposite = true
topYAxis.type = "linear"
// 固定取值范围
topYAxis.min = 0
topYAxis.max = 1000
// 固定刻度间隔为200,自动生成目标刻度
topYAxis.tickInterval = 200
// 强制首尾都显示刻度,避免自动偏移
topYAxis.startOnTick = true
topYAxis.endOnTick = true
topYAxis.title.text = "顶部数值轴"

3. 底部字符串类型Y轴配置

你之前无法配置字符串取值的核心原因是没有将y轴类型改为category,y轴默认是数值类型,不支持直接传入分类文本:

let bottomYAxis = HIYAxis()
// 设为false将轴放到反转后的底部位置
bottomYAxis.opposite = false
// 重点:将轴类型改为分类类型,支持字符串刻度
bottomYAxis.type = "category"
// 固定分类文本
bottomYAxis.categories = ["text1", "text2", "text3", "text4"]
// 固定显示所有4个分类
bottomYAxis.min = 0
bottomYAxis.max = 3
bottomYAxis.title.text = "底部分类轴"

4. 全局配置绑定

将轴配置关联到图表实例,同时给数据系列指定对应的y轴索引即可:

let options = HIOptions()
// 绑定x轴
options.xAxis = [xAxis]
// 绑定双y轴,索引0对应顶部轴、1对应底部轴
options.yAxis = [topYAxis, bottomYAxis]
// 示例:绑定系列到顶部y轴
let barSeries = HIBar()
barSeries.name = "数据系列1"
barSeries.yAxis = 0 // 指定绑定到索引为0的顶部y轴
barSeries.data = [120, 350, 580, 790, 940]
options.series = [barSeries]
// 赋值到图表视图
chartView.options = options

注意:如果你的系列需要绑定到底部分类轴,只需要将对应系列的yAxis属性设为1即可。

内容的提问来源于stack exchange,提问作者Reena

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.08 16:24:05