ios 图表标签(图例)在两个轴上的SwiftUi中均未显示

chhqkbe1 于 2023-05-19 发布在 iOS

关注(0)|答案(2)|浏览(99)

我无法在SwiftUi中显示图表轴的轴标签。图表显示，但轴和图例的标签不显示。我的代码显示图表如下。the result of the code are stated below

struct ReferData:Identifiable,Hashable {
    let id = UUID()
    let month:String
    let referCount:Int
    
    init(month:String,referCount:Int) {
        self.month = month
        self.referCount = referCount
    }
}

import Charts
struct ReferDashBoardView: View {
    
    @State var referData:[ReferData] = [
        ReferData(month: "Jan", referCount: 10),
        ReferData(month: "Feb", referCount: 23),
        ReferData(month: "Mar", referCount: 18),
        ReferData(month: "Apr", referCount: 48),
        ReferData(month: "May", referCount: 12),
        ReferData(month: "June", referCount: 38),
        ReferData(month: "July", referCount: 23),
        ReferData(month: "Aug", referCount: 29),
        ReferData(month: "Sept", referCount: 34),
        ReferData(month: "Oct", referCount: 42),
        ReferData(month: "Nov", referCount: 32),
        ReferData(month: "dec", referCount: 45)
    ]
    
    var body: some View {
        ScrollView(.vertical,showsIndicators: false) {
            VStack(alignment:.leading,spacing: 12){
                
                Chart{
                    ForEach(referData,id: \.self) { item in
                        BarMark(
                            x: .value("Month", item.month),
                            y: .value("ReferCount", item.referCount)
                        )
                    }
                }
                .foregroundColor(.orange)
            }
            .frame(maxWidth: .infinity)
            .frame(minHeight: 350)
        }
        .padding()
    }
}

ios

来源：https://stackoverflow.com/questions/76255258/chart-labellegend-not-showing-in-swiftui-on-both-axis

2条答案

按热度按时间

cwxwcias1#

为了显示轴标签，您需要使用Chart{}下面的.chartXAxisLabel（）。像这样：

var body: some View {
    ScrollView(.vertical,showsIndicators: false) {
        VStack(alignment:.leading,spacing: 12){
            
            Chart{
                ForEach(referData,id: \.self) { item in
                    BarMark(
                        x: .value("Month", item.month),
                        y: .value("ReferCount", item.referCount)
                    )
                }
            }
            .foregroundColor(.orange)
            .chartXAxisLabel("Month", position: .bottom)
            .chartYAxisLabel("ReferCount", position: .trailing)

        }
        .frame(maxWidth: .infinity)
        .frame(minHeight: 350)
    }
    .padding()
}

赞(0）回复(0）举报 2023-05-19

rekjcdws2#

为了显示轴标签，您需要使用Chart{}下面的.chartXAxis（）和.chartYAxis（）。例如：x1c 0d1x

var body: some View {
        ScrollView(.vertical,showsIndicators: false) {
            VStack(alignment:.leading,spacing: 12){
                
                Chart{
                    ForEach(referData,id: \.self) { item in
                        BarMark(
                            x: .value("Month", item.month),
                            y: .value("ReferCount", item.referCount)
                        )
                        .foregroundStyle(Color.green.gradient)

                     // Show the text inside barChart in black color

                        .annotation(position:.overlay,alignment: .center)
                        {
                            Text("\(item.referCount,format: .number.precision(.fractionLength(0)))")
                                .font(.caption)
                                .foregroundColor(.black)
                            
                        }
                    }

                }
                // Show the XAxis value label in black Color
                .chartXAxis {
                    AxisMarks { value in
                        AxisValueLabel().foregroundStyle(.black)
                    }
                }
                // Show YAxis Value label
                .chartYAxis {
                    AxisMarks { value in
                        AxisValueLabel().foregroundStyle(.black)
                    }
                }  
            }
            .frame(maxWidth: .infinity,minHeight: 300)
        }
        .padding()
    }

赞(0）回复(0）举报 2023-05-19

我来回答

ios 图表标签(图例)在两个轴上的SwiftUi中均未显示

2条答案

相关问题

热门标签

最新问答