Swift中使用Highcharts CocoaPods实现柱状图自定义标签

要实现柱子顶部显示排名、柱子中间显示指定数组内容的需求，核心是给每个数据点附加自定义属性，然后通过多组dataLabels分别配置不同位置的标签内容。以下是完整实现步骤和代码：

1. 预处理数据：给数值附加自定义属性 #

Highcharts iOS支持在data中传入带自定义字段的字典数组，这样可以在标签格式化函数中访问这些自定义属性。

假设你已有：

• aryData: 浮点型Y轴数值数组
• middleLabelArray: 需要显示在柱子中间的数组 [1,1,2,3,3,4,5,6,6,7]
• 排名数组（可动态计算或预先定义）

先把数据转换为包含自定义字段的数组：

// 替换为你的arySerisModel[i].aryData
let aryData: [Double] = [15, 15, 22, 30, 30, 41, 55, 62, 62, 70]
// 用户指定的中间标签数组
let middleLabelArray = [1,1,2,3,3,4,5,6,6,7]

// 动态计算排名（相同数值排名相同）
func calculateRanks(from values: [Double]) -> [Int] {
    let sortedUniqueValues = Array(Set(values)).sorted(by: >)
    var rankMap: [Double: Int] = [:]
    sortedUniqueValues.enumerated().forEach { index, value in
        rankMap[value] = index + 1
    }
    return values.map { rankMap[$0] ?? 0 }
}
let topRankArray = calculateRanks(from: aryData)

// 转换为带自定义属性的数组
var customData: [Any] = []
for index in 0..<aryData.count {
    customData.append([
        "y": aryData[index],
        "rank": topRankArray[index],
        "middleLabel": middleLabelArray[index]
    ])
}

2. 配置柱状图的自定义标签 #

通过dataLabels数组配置两组标签：一组显示在柱子顶部（排名），一组显示在柱子中间（指定数组内容）。

// 创建柱状图系列
let column = HIColumn()
column.data = customData

// 配置顶部排名标签
let topRankLabel = HIDataLabels()
topRankLabel.enabled = true
topRankLabel.align = .center
topRankLabel.verticalAlign = .top
topRankLabel.y = -10 // 向上偏移，避免与柱子顶部重叠
topRankLabel.formatter = "function() { return this.point.rank; }" // 读取自定义rank字段

// 配置柱子中间的标签
let middleLabel = HIDataLabels()
middleLabel.enabled = true
middleLabel.align = .center
middleLabel.verticalAlign = .middle
middleLabel.formatter = "function() { return this.point.middleLabel; }" // 读取自定义middleLabel字段

// 将两组标签加入series的dataLabels
column.dataLabels = [topRankLabel, middleLabel]

// 配置图表基础信息（按需调整）
let chart = HIChart()
chart.type = "column"

let title = HITitle()
title.text = "自定义标签柱状图"

let options = HIOptions()
options.chart = chart
options.title = title
options.series = [column]

// 绑定到HighchartsView（假设你已在Storyboard中添加HighchartsView）
// highchartsView.options = options

关键说明 #

• 自定义字段通过字典传入data，在JS格式化函数中通过this.point.字段名访问
• dataLabels支持数组形式，可同时配置多个位置的标签
• verticalAlign控制标签垂直位置（.top/.middle/.bottom），y属性可微调偏移量

内容的提问来源于stack exchange，提问作者devar007