I want to display a BarChartsView created in UIKit nicely in SwiftUI

Viewed 12

I am planning to do import charts in UIKit and build the dashboard in swift while using UIViewControllerRepresentable to display the dashboard built in SwiftUI.

import UIKit
import Charts
import SwiftUI

/**
 swift → swiftui
 */
struct BarChartsView : UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> BarChartViewController {
        return BarChartViewController()
    }
    func updateUIViewController(_ uiViewController: BarChartViewController, context: Context) {
    }
}



/**
 make BarChart
 */
class BarChartViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.makeBarChart()
    }
    
    func makeBarChart(){
        
        let barChartView = BarChartView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 300))
        
        let rawData: [Int] = [20, 50, 70, 30, 60, 90, 40]
        let entries = rawData.enumerated().map { BarChartDataEntry(x: Double($0.offset), y: Double($0.element)) }
        
        let set = [
            BarChartDataSet(entries: entries, label: "Data")
        ]
        
        barChartView.xAxis.labelPosition = .bottom
        barChartView.xAxis.labelTextColor = .systemGray
        barChartView.xAxis.drawGridLinesEnabled = false
        barChartView.xAxis.drawAxisLineEnabled = false
        
        barChartView.rightAxis.enabled = false
        
        barChartView.leftAxis.axisMinimum = 0.0
        barChartView.leftAxis.drawZeroLineEnabled = true
        barChartView.leftAxis.zeroLineColor = .systemGray
        barChartView.leftAxis.labelCount = 5
        barChartView.leftAxis.labelTextColor = .systemGray
        barChartView.leftAxis.gridColor = .systemGray
        barChartView.leftAxis.drawAxisLineEnabled = false
        barChartView.legend.enabled = false
        
        let avg = rawData.reduce(0) { return $0 + $1 } / rawData.count
        let limitLine = ChartLimitLine(limit: Double(avg))
        limitLine.lineColor = .systemOrange
        limitLine.lineDashLengths = [4]
        barChartView.leftAxis.addLimitLine(limitLine)
        
        barChartView.data = BarChartData(dataSets: set)
        self.view.addSubview(barChartView)
    }
    
}

So I would like to know the following two points.

  1. When I call the BarChartsView created with UIKit in the following code on SwiftUI and apply ScrollView, horizontal scrolling is not applied. I have dared to create a large horizontal size in BarChartsView, but horizontal scrolling is not possible. And moreover, BarChartsView itself is not displayed. How can I make it work?
struct CustomerView: View{
    var body: some View{
        ScrollView(){
            VStack(){
                VStack(){
                    Text("What!!").frame(width: UIScreen.main.bounds.width, height: 40).background(Color.red).foregroundColor(Color.white)
                    ScrollView(.horizontal){
                        BarChartsView()
                    }
                }
            }
        }
    }
}
  1. When I write and build two BarChartsViews side by side in VStack as shown below, the BarChartsView is displayed as if it does not exist in the first place. How can I make it so that they do not overlap?
struct CustomerView: View{
    var body: some View{
        ScrollView(){
            VStack(){
                VStack(){
                    Text("What!!").frame(width: UIScreen.main.bounds.width, height: 40).background(Color.red).foregroundColor(Color.white)
                    BarChartsView()
                }
                VStack(){
                    Text("What!!").frame(width: UIScreen.main.bounds.width, height: 40).background(Color.red).foregroundColor(Color.white)
                    BarChartsView()
                }
            }
        }
    }
}

Thank you in advance.

0 Answers
Related