在 SwiftUI 图表中,不显示 y 轴最上面的标签

问题描述 投票:0回答:1

我目前正在尝试使用图表框架在 swift 中实现一个快速图表。 现在,如果我将

AxisValueLable
的锚点设置为任何
.bottom
值,则不会显示最上面的值。

enter image description here

这是迄今为止我的代码:

struct ChartView: View {
enum ChartType: String, Plottable, CaseIterable {
    case total = "Total"
    case grid = "Grid"
    case solar = "Solar"
    
    var primitivePlottable: String {
        rawValue
    }
}

struct TestStruct: Identifiable, Hashable {
    var type: ChartType
    var value: Double
    var date: Date
    var id = UUID().uuidString
}

let testData = [
    TestStruct(type: .total, value: 0, date: Date.now),
    TestStruct(type: .total, value: 21, date: Date.now.addingTimeInterval(60)),
    TestStruct(type: .total, value: 19, date: Date.now.addingTimeInterval(2*60)),
    TestStruct(type: .total, value: 17, date: Date.now.addingTimeInterval(3*60)),
    TestStruct(type: .total, value: 12, date: Date.now.addingTimeInterval(4*60)),
    TestStruct(type: .total, value: 0, date: Date.now.addingTimeInterval(5*60))
]

var body: some View {
        Chart {
            ForEach(testData) {
                LineMark(x: .value("Test x", $0.date),
                         y: .value("Test y", $0.value))
                    .foregroundStyle(by: .value("Type", $0.type))
                
                AreaMark(x: .value("Test x", $0.date),
                         y: .value("Test y", $0.value))
                    .foregroundStyle(LinearGradient(gradient: Gradient(colors: [
                        .blue.opacity(0.8),
                        .blue.opacity(0)
                        ]),
                        startPoint: .top,
                        endPoint: .bottom))
                    .foregroundStyle(by: .value("Type", $0.type))
            }
        }
        .chartLegend(position: .top)
        .chartXAxis(content: {
            AxisMarks { _ in
            }
        })
        .chartYAxis(content: {
            AxisMarks(preset: .inset,position: .leading) { _ in
                AxisValueLabel(anchor: .bottomLeading) {
                    Text("kW")
                        .font(.footnote)
                        .foregroundColor(.gray)
                }
            }
            
            AxisMarks(preset: .inset, position: .trailing) { value in
                AxisGridLine()
                let number = value.as(Int.self) ?? 0
                AxisValueLabel(anchor: .bottomTrailing) {
                    Text("\(number)")
                        .font( .footnote)
                        .foregroundColor(.gray)
                        .offset(x: 20)
                }
                AxisTick(centered: false, length: 20)
                    .offset(x: 20)
            }
        })
        
        .frame(height: 290)
        .padding(.horizontal, 20)
        .padding(.bottom, 16)
        .padding(.top, 32)
        .background {
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.gray.opacity(0.2))
        }
}

}

如果我使用默认的 AxisLabels,则会显示最上面的标签。

enter image description here

有人遇到过同样的问题并可以帮助我解决这个问题吗?

swift swiftui charts
1个回答
0
投票

好的,我用

.chartYScale
就可以了。但只有当我使用变量时它才有效。如果我直接使用范围,它不起作用

© www.soinside.com 2019 - 2024. All rights reserved.