[英]LineChart not displaying within a ScrollView with SwiftUI and Charts library
我正在使用帶有 SwiftUI 的圖表庫 ( https://github.com/danielgindi/Charts )。 我正在創建 3 個簡單的折線圖,我希望它們成為 ScrollView 的一部分。 沒有 ScrollView 圖表顯示正常。 但是,使用 ScrollView 不會顯示圖表。 我究竟做錯了什么?
在下面的代碼中,我顯示了 3 個相同的折線圖。 如果 ScrollView 被注釋掉,則顯示圖表。 但是,在 ScrollView 中,沒有顯示任何內容
代碼如下:
import SwiftUI
import Charts
struct ContentView: View {
var body: some View {
ScrollView(.vertical) {
VStack {
LineChart()
.padding()
LineChart()
.padding()
LineChart()
.padding()
}
}
}
}
struct LineChart: UIViewRepresentable {
func makeUIView(context: Context) -> LineChartView {
let lineChart = LineChartView()
lineChart.backgroundColor = .white
setUpChart(lineChart: lineChart)
lineChart.delegate = context.coordinator
return lineChart
}
func setUpChart(lineChart: LineChartView) {
let dataset = LineChartDataSet(entries: yvalues, label: "test data")
dataset.drawCirclesEnabled = false
dataset.mode = .cubicBezier
dataset.lineWidth = 2
dataset.setColor(.red)
let gradientColors = [UIColor.white.cgColor, UIColor.red.cgColor]
if let gradient = CGGradient.init(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil) {
dataset.fill = Fill.fillWithLinearGradient(gradient, angle: 90.0)
} else {
dataset.fill = Fill(color: .white)
}
dataset.fillAlpha = 1.0
dataset.drawFilledEnabled = true
dataset.drawHorizontalHighlightIndicatorEnabled = false
dataset.highlightColor = .systemRed
dataset.highlightLineWidth = 2
let data = LineChartData(dataSet: dataset)
lineChart.data = data
lineChart.rightAxis.enabled = false
let yaxis = lineChart.leftAxis
yaxis.labelFont = .boldSystemFont(ofSize: 12)
yaxis.labelTextColor = .blue
yaxis.axisLineColor = .blue
lineChart.xAxis.labelPosition = .bottom
lineChart.xAxis.labelFont = .boldSystemFont(ofSize: 12)
lineChart.xAxis.labelTextColor = .blue
lineChart.xAxis.axisLineColor = .blue
lineChart.highlightPerTapEnabled = true
lineChart.highlightPerDragEnabled = true
lineChart.animate(xAxisDuration: 2.5)
lineChart.drawMarkers = true
let marker = BalloonMarker(color: UIColor(white: 180/255, alpha: 1),
font: .systemFont(ofSize: 12),
textColor: .white,
insets: UIEdgeInsets(top: 8, left: 8, bottom: 20, right: 8))
marker.chartView = lineChart
marker.minimumSize = CGSize(width: 80, height: 40)
lineChart.marker = marker
}
func updateUIView(_ uiView: LineChartView, context: Context) {
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, ChartViewDelegate {
private let parent: LineChart
init(_ chartView: LineChart) {
self.parent = chartView
}
}
func getChartDataPoints(sessions: [Int], accuracy: [Double]) -> [ChartDataEntry] {
var dataPoints: [ChartDataEntry] = []
for count in (0..<sessions.count) {
dataPoints.append(ChartDataEntry.init(x: Double(sessions[count]), y: accuracy[count]))
}
return dataPoints
}
let yvalues: [ChartDataEntry] = [
ChartDataEntry(x: 0.0, y: 10.0),
ChartDataEntry(x: 1.0, y: 5.0),
ChartDataEntry(x: 2.0, y: 7.0),
ChartDataEntry(x: 3.0, y: 5.0),
ChartDataEntry(x: 4.0, y: 10.0),
ChartDataEntry(x: 5.0, y: 6.0),
ChartDataEntry(x: 6.0, y: 5.0),
ChartDataEntry(x: 7.0, y: 7.0),
ChartDataEntry(x: 8.0, y: 8.0),
ChartDataEntry(x: 9.0, y: 12.0),
ChartDataEntry(x: 10.0, y: 13.0),
ChartDataEntry(x: 11.0, y: 5.0),
ChartDataEntry(x: 12.0, y: 7.0),
ChartDataEntry(x: 13.0, y: 13.0),
ChartDataEntry(x: 14.0, y: 15.0),
ChartDataEntry(x: 15.0, y: 6.0),
ChartDataEntry(x: 16.0, y: 22.0),
ChartDataEntry(x: 17.0, y: 18.0),
ChartDataEntry(x: 18.0, y: 25.0),
ChartDataEntry(x: 19.0, y: 22.0)
]
}
它不會顯示,因為在ScrollView
您必須設置圖表的高度。 嘗試像這樣設置frame
高度:
LineChart()
.frame(height: 300)
.padding()
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.