[英]LineChart not displaying within a ScrollView with SwiftUI and Charts library
I am using the Charts library ( https://github.com/danielgindi/Charts )with SwiftUI.我正在使用带有 SwiftUI 的图表库 ( https://github.com/danielgindi/Charts )。 I am creating 3 simple line charts that I would like to be part of a ScrollView.
我正在创建 3 个简单的折线图,我希望它们成为 ScrollView 的一部分。 Without the ScrollView the charts display fine.
没有 ScrollView 图表显示正常。 However, with the ScrollView the Charts are not displayed.
但是,使用 ScrollView 不会显示图表。 What am I doing wrong?
我究竟做错了什么?
In the code below, I am displaying 3 identical line charts.在下面的代码中,我显示了 3 个相同的折线图。 If the ScrollView is commented out, the charts are displayed.
如果 ScrollView 被注释掉,则显示图表。 However, within the ScrollView, nothing is displayed
但是,在 ScrollView 中,没有显示任何内容
Code below:代码如下:
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)
]
}
It doesn't display because inside the ScrollView
you have to set the height of the chart.它不会显示,因为在
ScrollView
您必须设置图表的高度。 Try setting the frame
height like this:尝试像这样设置
frame
高度:
LineChart()
.frame(height: 300)
.padding()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.