ios - LineChart 未显示在带有 SwiftUI 和图表库的 ScrollView 中
问题描述
我正在使用带有 SwiftUI的 Charts 库 ( 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()
推荐阅读
- javascript - 将文本添加到标记(功能)
- sql - Postgresql分组错误:用作表达式的子查询返回多行
- php - PHP - 解析大型 XML URL
- c - 如何在c中将文本文件拆分为多个部分
- ruby-on-rails - Rails.cache 如何同时进行增量和过期
- java - 生成 N*N 个文档
- c# - 错误消息:创建 TLS 客户端凭据时发生致命错误。内部错误状态为 10013
- stock - IEX:历史市值
- nginx - Debian 8.10 (jessie)(OldStable) PHP7.2 (nginx) + phpMyAdmin 安装
- python - pip --cache-dir vs 版本范围