条形图以矩形条的形式呈现数据的类别,其宽度和高度与它们表示的值成比例。本文将展示如何创建一个垂直条形图,其中矩形的高度将代表每个类别的值。
系列文章
- 如何在 SwiftUI 中创建条形图
- SwiftUI 中的水平条形图
- 在 iOS 16 中用 SwiftUI Charts 创建一个折线图
- 在 iOS16 中用 SwiftUI 图表定制一个线图
- 在 Swift 图表中使用 Foudation 库中的测量类型
开始图表布局
SwiftUI 对探索不同布局和预览实时视图结果是很友好的。很容易将部分内容提取到子视图中,以便每个部分都很小且易于维护。从将包含 BarChartView
以及可能的其他文本或数据的视图开始。这个 BarChartView
包含一个标题和一个图表区,它们由文本和圆角矩形表示。
struct ChartView1: View {
var body: some View {
VStack {
Text("Sample Bar Chart")
.font(.title)
BarChartView(
title: "the chart title")
.frame(width: 300, height: 300, alignment: .center)
Spacer()