使用AAChartModel-Swift/AAInfographics时图表无法显示的问题

问题描述 #

我正在尝试使用AAChartModel Swift库，已导入并执行import AAInfographics，但无法成功显示图表。我在VStack的onAppear中编写了如下代码：

.onAppear {
    let chartModel = AAChartModel()
        .chartType(.bar)
        .title("Polar Area Chart")
        .subtitle("A simple polar area chart")
        .dataLabelsEnabled(true)
        .categories(["Jan", "Feb", "Mar", "Apr", "May", "Jun"])
        .yAxisTitle("Y-axis Title")
        .series([
            AASeriesElement()
                .name("Polar Area Chart")
                .data([7.0, 6.9, 2.5, 14.5, 18.2, 21.5])
        ])
    
    let chartView = AAChartView()
    chartView.frame = CGRect(x: 0,
                            y: 60,
                            width: 200,
                            height: 200)
    chartView.aa_drawChartWithChartModel(chartModel)
}

控制台打印内容（结尾为👻👻👻 AAChartView was destroyed!!!）：

-----------🖨🖨🖨 console log AAOptions JSON information of AAChartView 🖨🖨🖨-----------:
{
  "series" : [
    {
      "data" : [
        7,
        6.9000000000000004,
        2.5,
        14.5,
        18.199999999999999,
        21.5
      ],
      "name" : "Polar Area Chart"
    }
  ],
  "legend" : {
    "enabled" : true
  },
  "xAxis" : {
    "categories" : [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun"
    ],
    "visible" : true,
    "labels" : {
      "enabled" : true
    },
    "title" : {
      "text" : ""
    }
  },
  "tooltip" : {
    "shared" : true,
    "enabled" : true
  },
  "subtitle" : {
    "text" : "A simple polar area chart"
  },
  "chart" : {
    "pinchType" : "none",
    "panning" : true,
    "type" : "bar"
  },
  "colors" : [
    "#1e90ff",
    "#ef476f",
    "#ffd066",
    "#04d69f",
    "#25547c"
  ],
  "plotOptions" : {
    "series" : {
      "stacking" : "",
      "animation" : {
        "duration" : 800,
        "easing" : 0
      },
      "dataLabels" : {
        "enabled" : true
      }
    },
    "bar" : {
      "borderWidth" : 0,
      "borderRadius" : 0
    }
  },
  "credits" : {
    "enabled" : false
  },
  "yAxis" : {
    "title" : {
      "text" : "Y-axis Title"
    },
    "visible" : true,
    "lineWidth" : 0,
    "labels" : {
      "enabled" : true
    },
    "gridLineWidth" : 0.60000002384185791
  },
  "title" : {
    "text" : "Polar Area Chart"
  }
}
👻👻👻 AAChartView was destroyed!!!

问题根源 #

你在onAppear闭包内创建的AAChartView是局部变量，既没有被添加到SwiftUI的视图层级中，闭包执行完毕后该实例会被ARC自动释放，因此控制台打印AAChartView was destroyed!!!，图表自然无法显示。

修复方案 #

在SwiftUI中使用AAChartView，需要将其包装为UIViewRepresentable组件，确保实例被视图层级持有：

1. 创建包装组件：

struct AAChartViewWrapper: UIViewRepresentable {
    let chartModel: AAChartModel
    
    func makeUIView(context: Context) -> AAChartView {
        let chartView = AAChartView()
        chartView.aa_drawChartWithChartModel(chartModel)
        return chartView
    }
    
    func updateUIView(_ uiView: AAChartView, context: Context) {
        // 如需更新图表，可在此处理
    }
}

2. 在主视图中使用该组件：

struct ContentView: View {
    private let chartModel = AAChartModel()
        .chartType(.bar)
        .title("Polar Area Chart")
        .subtitle("A simple polar area chart")
        .dataLabelsEnabled(true)
        .categories(["Jan", "Feb", "Mar", "Apr", "May", "Jun"])
        .yAxisTitle("Y-axis Title")
        .series([
            AASeriesElement()
                .name("Polar Area Chart")
                .data([7.0, 6.9, 2.5, 14.5, 18.2, 21.5])
        ])
    
    var body: some View {
        VStack {
            AAChartViewWrapper(chartModel: chartModel)
                .frame(width: 200, height: 200)
                .padding(.top, 60)
        }
    }
}

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