Question

Using Swift Charts, I have a bar chart that has dates on the x-axis and points on the y-axis. This data comes from the property chartData which contains the integer points for each date. The data point representing today s date and points could be anywhere in the chartData.

因此,我要将轴心标签的颜色改为今天的蓝色。所有其他日期都应保留在其缺席时。这使用户能够直观地显示今天的日期。

I know how to change the color of all x-axis labels, but this is not what I want. I want to change the color of the one x-axis label that matches todays date. Thank you!

struct DailyPointsChart: View {
    @Binding var scrollPosition: Date
    let chartData: [(Date, Int)]
    
    var body: some View {
        Chart {
            ForEach(chartData, id: .0) { data in
                BarMark(
                    x: .value("Day", data.0, unit: .day),
                    y: .value("Points", data.1)
                )
            }
            .cornerRadius(10)
            .foregroundStyle(Color(UIColor.purple))

        }
        .chartScrollableAxes(.horizontal)
        .chartXVisibleDomain(length: 3600 * 24 * 7) // 7 visible days on chart
        .chartScrollPosition(x: $scrollPosition)
        
        .chartXAxis {
            AxisMarks(values: .stride(by: .day, count: 1)) {
                AxisTick()
                AxisValueLabel(format: .dateTime.month().day())
                    .foregroundStyle(Color.blue) // This changes the color of all x-axis labels, which is not what we want
            }
        }
    }
}

Answer 1

Try this approach where you specify a particular time value for the AxisMarks, as shown in the example code (adjust for your data type)

 .chartXAxis {
     // all values, black
     AxisMarks(values: .stride(by: .day, count: 1)) {
         AxisTick()
         AxisValueLabel(format: .dateTime.month().day())
             .foregroundStyle(Color.black)
     }
     // just the specified value, blue
     AxisMarks(values: [chartData[2].0]) { // <-- here, a specific time value
         AxisTick()
         AxisValueLabel(format: .dateTime.month().day())
             .foregroundStyle(Color.blue)
     }
 }

友情链接