时间戳

首页 > 解决方案 > 使用 SwiftUI 和图表库合并两个 xy 图

swiftui - 使用 SwiftUI 和图表库合并两个 xy 图

问题描述

我正在使用 SwiftUI 和图表库（即导入图表）

生产一条单线就可以了。但是我想在图表上绘制 2 条单独的线

但无法弄清楚如何做到这一点

我用以下行调用结构：

myLineChartSwiftUI(myXminny: self.$myXminny, myXmaxy: self.$myXmaxy)

我添加了第二行设置（即 dataPoints2、set2、color2 等）

我到底如何结合两条线返回情节？

非常感谢您的帮助

我的第一个 swiftUI 和第一个图表程序：

struct myLineChartSwiftUI : UIViewRepresentable
{
    @Binding var myXminny : Double
    @Binding var myXmaxy  : Double

    let lineChart = LineChartView()

    func makeUIView(context: UIViewRepresentableContext<myLineChartSwiftUI>) -> LineChartView {
        setUpChart()
        return lineChart
    }

    func updateUIView(_ uiView: LineChartView, context: UIViewRepresentableContext<myLineChartSwiftUI>) {

    }

    func setUpChart() {
        
        let dataSets = [getLineChartDataSet()]
        let data = LineChartData(dataSets: dataSets)
        lineChart.data = data
    }

    func getChartDataPoints(sessions: [Double], 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
    }

    func getLineChartDataSet() -> LineChartDataSet {

        let dataPoints = getChartDataPoints(sessions: [myXminny,myXmaxy], accuracy: [myXminny,myXmaxy]) 
        let set = LineChartDataSet(entries: dataPoints, label: "DataSet")
        set.lineWidth = 2
        set.drawValuesEnabled = false
        set.drawCirclesEnabled = false
        //set.circleRadius = 4
        let color = ChartColorTemplates.vordiplom()[4]
        set.setColor(color)

        let dataPoints2 = getChartDataPoints(sessions: [myXminny/2,myXmaxy/2], accuracy: [myXminny/2,myXmaxy/2])
        let set2 = LineChartDataSet(entries: dataPoints2, label: "DataSet2")
        set2.lineWidth = 2
        set2.drawValuesEnabled = false
        set2.drawCirclesEnabled = false
        let color2 = ChartColorTemplates.vordiplom()[4]
        set2.setColor(color2)
        
        let data = LineChartData(dataSets: [set, set2])

        return set
    }
}

标签： swiftuiios-charts

解决方案

对于那些对解决方案感兴趣的人，代码如下：

import SwiftUI
import Charts

struct GraphSwiftUI: View {
var body: some View {
    GeometryReader { p in
        VStack {
            LineChartSwiftUI()
                //use frame to change the graph size within your SwiftUI view
                .frame(width: p.size.width, height: p.size.width, alignment: .center)
        }
    }
}
}

struct LineChartSwiftUI: UIViewRepresentable {
let lineChart = LineChartView()

func makeUIView(context: UIViewRepresentableContext<LineChartSwiftUI>) -> LineChartView {
    setUpChart()
    return lineChart
}

func updateUIView(_ uiView: LineChartView, context: UIViewRepresentableContext<LineChartSwiftUI>) {

}

func setUpChart() {
    let dataSets = [getLineChartDataSet()]
    let data = LineChartData(dataSets: dataSets)
}

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
}

func getLineChartDataSet() -> LineChartDataSet {
    let dataPoints = getChartDataPoints(sessions: [0,1,5], accuracy: [0, 2, 8])
    let set = LineChartDataSet(entries: dataPoints, label: "DataSet")
    set.lineWidth = 3
    let color = ChartColorTemplates.vordiplom()[4]
    set.setColor(color)
    
    

    let dataPoints2 = getChartDataPoints(sessions: [0,1,5], accuracy: [50,10,15])
    let set2 = LineChartDataSet(entries: dataPoints2, label: "DataSet2")
    set2.lineWidth = 2
    set2.drawValuesEnabled = true
    set2.drawCirclesEnabled = true
    let color2 = ChartColorTemplates.vordiplom()[3]
    set2.setColor(color2)

    let data = LineChartData(dataSets: [set, set2])
    lineChart.data = data

    
    

    return set
}
}

struct GraphSwiftUI_Previews: PreviewProvider {
static var previews: some View {
    GraphSwiftUI()
}
}

推荐阅读