Swift分组条形图创建及Charts库版本迁移问题咨询

嘿，我来帮你搞定Charts库的迁移和分组条形图的问题！这些都是升级时容易踩坑的点，我整理了清晰的步骤和示例代码，你可以直接参考~

Charts 3.x做了不少破坏性变更，核心集中在命名规范、数据结构和配置API上，以下是关键调整点：

• 命名前缀移除：旧版本的Charts.BarChartView这类带前缀的类，现在直接用BarChartView即可，所有组件都去掉了Charts命名空间。
• 数据条目构造变更：
  旧代码里的BarChartDataEntry(value: xIndex:)被替换成BarChartDataEntry(x: y:)，因为3.x开始支持数值型X轴，不再局限于索引值。
• X轴标签配置升级：
  自定义X轴标签不再用旧的代理方式，而是直接设置xAxis.valueFormatter = IndexAxisValueFormatter(values: 你的标签数组)，枚举值也改成了Swift 4规范的小写开头（比如.Bottom→.bottom）。
• 样式属性调整：
  条形宽度从barSpace改成了barWidth；图例、坐标轴的枚举属性（比如位置、对齐方式）都统一为小写开头。

新旧代码对比示例 #

旧代码（Swift 2.3 + Charts 2.2.5）：

let chartView = Charts.BarChartView(frame: view.bounds)
let entries = [BarChartDataEntry(value: 10000, xIndex: 0)]
let dataSet = BarChartDataSet(yVals: entries, label: "销售额")
let data = BarChartData(xVals: ["01.03.2018"], dataSet: dataSet)
chartView.data = data

新代码（Swift 4.1 + Charts 3.1.0）：

let chartView = BarChartView(frame: view.bounds)
let entries = [BarChartDataEntry(x: 0, y: 10000)]
let dataSet = BarChartDataSet(entries: entries, label: "销售额")
let data = BarChartData(dataSet: dataSet)
// 设置X轴自定义标签
chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: ["01.03.2018"])
chartView.data = data

分组条形图需要创建多个BarChartDataSet，通过调整条形宽度和偏移量实现并排显示，具体步骤如下：

1. 准备多组数据：比如“本月”和“上月”的两组销售数据；
2. 创建独立DataSet：每个DataSet对应一组数据，设置不同颜色区分；
3. 调整布局参数：通过barWidth、groupSpace控制每组的间距和宽度；
4. 配置X轴与数据：将多个DataSet组合到BarChartData中，设置X轴标签居中显示。

完整示例代码 #

// 模拟X轴标签和两组数据
let xLabels = ["01.03.2018", "02.03.2018", "03.03.2018"]
// 第一组：本月销售额
let entries1 = xLabels.enumerated().map { 
    BarChartDataEntry(x: Double($0.offset), y: Double(Int.random(in: 5000...15000))) 
}
let dataSet1 = BarChartDataSet(entries: entries1, label: "本月")
dataSet1.setColor(.systemBlue)

// 第二组：上月销售额
let entries2 = xLabels.enumerated().map { 
    BarChartDataEntry(x: Double($0.offset), y: Double(Int.random(in: 3000...12000))) 
}
let dataSet2 = BarChartDataSet(entries: entries2, label: "上月")
dataSet2.setColor(.systemGreen)

// 配置分组布局参数
let groupSpace = 0.3    // 组与组之间的间距
let barSpace = 0.05     // 同组内条形的间距
let barWidth = (1 - groupSpace) / 2 - barSpace  // 单个条形的宽度

dataSet1.barWidth = barWidth
dataSet2.barWidth = barWidth

// 设置偏移量，让两组条形并排
dataSet1.xOffset = barWidth + barSpace
dataSet2.xOffset = -(barWidth + barSpace)

// 组合数据并配置图表
let data = BarChartData(dataSets: [dataSet1, dataSet2])
chartView.data = data

// 优化X轴显示
chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: xLabels)
chartView.xAxis.axisMinimum = -0.5  // 避免第一个组被左侧截断
chartView.xAxis.axisMaximum = Double(xLabels.count) - 0.5
chartView.xAxis.groupWidth = groupSpace + barSpace * 2
chartView.xAxis.centerAxisLabelsEnabled = true  // 标签居中显示在组上方

针对你提供的JSON结构[{"Items":[{"X":"01.03.2018","Value":10000},{"X":"..."}]}]，用Swift 4+的Codable协议解析最方便：

1. 定义数据模型 #

struct ChartDataResponse: Codable {
    let Items: [ChartItem]
}

struct ChartItem: Codable {
    let X: String
    let Value: Double
}

2. 解析并填充图表 #

// 示例JSON字符串
let jsonString = """
[{"Items":[{"X":"01.03.2018","Value":10000},{"X":"02.03.2018","Value":8000},{"X":"03.03.2018","Value":12000}]}]
"""

// 解析JSON
guard let jsonData = jsonString.data(using: .utf8),
      let responses = try? JSONDecoder().decode([ChartDataResponse].self, from: jsonData),
      let chartItems = responses.first?.Items else {
    print("JSON解析失败")
    return
}

// 转换为Chart需要的条目
let xLabels = chartItems.map { $0.X }
let entries = chartItems.enumerated().map { 
    BarChartDataEntry(x: Double($0.offset), y: $0.element.Value) 
}

// 创建数据集和图表数据
let dataSet = BarChartDataSet(entries: entries, label: "销售额")
let data = BarChartData(dataSet: dataSet)

// 配置图表
chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: xLabels)
chartView.data = data

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