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
相关产品推荐
相关产品推荐

