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.
- 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()
}
}
}
}
}
}
- 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.