如何自定义 Swift Charts 中的 y 轴值？

Question

我有一个简单的图表（使用 Swift Charts 框架制作），其中显示了某物随时间变化的百分比。这里的 x 轴是时间，y 轴是百分比。因此，我认为如果 y 轴的值类似于 25%、50% 等，对用户来说会更有意义。

如何自定义 y 轴值并在末尾添加符号（在本例中为

%

）？

这是到目前为止的代码：

Chart(data, id: \.date) { datum in
    LineMark(
        x: .value("Date", datum.date, unit: .day),
        y: .value("Done", datum.doneCount * 100 / (datum.doneCount + datum.notDoneCount))
    )
    .interpolationMethod(.catmullRom)
    .foregroundStyle(Color.orange)
}
.chartXAxis {
    AxisMarks(values: .stride(by: .day))
}

Answer 1

只需将此代码块添加到您的图表中

.chartYAxis {
   AxisMarks() {
       let value = $0.as(Int.self)!
       AxisValueLabel {
           Text("\(value)%")
       }
   }
}

您的图表将显示 0%、25%、... 作为标签

Answer 2

为了用“%”格式化y轴标记，可以使用Decimal.FormatStyle.Percent：

.chartYAxis {
    AxisMarks(
        format: Decimal.FormatStyle.Percent.percent.scale(1),
        values: [0, 25, 50, 75, 100]
    )
}

如果您想让默认值显示（在您不知道这些值是否会受到 100% 限制的情况下），您可以将值留空：

.chartYAxis {
   AxisMarks() {
       AxisValueLabel(format: Decimal.FormatStyle.Percent.percent.scale(1))
   }
}

Apple 的文章“自定义 Swift 图表中的轴”中介绍了这些场景和其他场景：https://developer.apple.com/documentation/charts/customizing-axes-in-swift-charts