第8章第26节：完成月度支出柱形图表的制作 [SwiftUI快速入门到实战]

最新推荐文章于 2023-01-12 16:00:05 发布
最新推荐文章于 2023-01-12 16:00:05 发布
阅读量229 收藏
点赞数
分类专栏： SwiftUI快速入门到实战 文章标签： swift swiftui swiftui教程 ios开发
本文为互动教程网原创文章，欢迎转载但请注明来源。
本文链接：https://blog.csdn.net/fzhlee/article/details/120341289
版权
本教程详细介绍了如何使用SwiftUI来创建一个月度支出的柱状图表。通过添加和布局多个视图，包括HStack、VStack和自定义视图，以及设置相关属性和条件判断，实现柱形的高度、颜色和日期标签的动态展示。最终，通过提取子视图优化代码结构，完成柱状图的完整制作。
摘要由CSDN通过智能技术生成

  1. 本节课延续上一节课的内容，您将完成月度支出柱形图表的制作。现在开始编写代码，实现这项功能。
    SwiftUI快速入门到实战

  2. 首先添加一个HStack视图，作为柱形图表子视图的容器。
    SwiftUI快速入门到实战

  3. 添加另一个HStack视图，作为柱形和分隔视图的容器。
    SwiftUI快速入门到实战

  4. 然后添加一个VStack视图，作为柱形上方的金额标签、柱形和柱形下方的月份标签的容器。
    SwiftUI快速入门到实战

  5. 在按下command键的同时，点击此处的视图，打开快捷操作菜单。

了解本专栏 订阅专栏 解锁全文 超级会员免费看
李发展
关注
专栏目录
订阅专栏
macOS SwiftUI 教程之绘制柱状图(教程含源码)
iCloudEnd的博客
12-13 460
实战需求 macOS SwiftUI 教程之绘制柱状图 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 取消间距VStack(spacing: 0) 矩状图Capsule() 设置高度.frame(width: 10, height: CGFloat(value)) 基础知识 Capsule 胶囊形状在包含它的视图框架内对齐。 @frozen struct Capsule ###总览 胶囊形状等效于圆角矩形，其中角半径选择为矩形最小边缘长度的一半。 实战代码 1、主界
macOS SwiftUI 图表教程之 03 绘制多彩柱状图BarChart含图例与交互SwiftUICharts (教程含源码)
iCloudEnd的博客
02-08 409
实战需求 macOS SwiftUI 图表教程之 03 绘制多彩柱状图BarChart含图例与交互SwiftUICharts (教程含源码) 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 初始化数据 设置标题 设置图例 支持交互 支持平均线 实战代码 1、主界面 import SwiftUI import SwiftUICharts struct ContentView: View { let data : ChartData = weekOfData()
SwiftUI SceneKit 之做个3D柱状图(教程含源码)
iCloudEnd的博客
07-26 496
实战需求 SwiftUI如何使用SceneKit并显示个3D柱状图 本文价值与收获 看完本文后，您将能够作出下面的界面 基础知识 SceneKit 使用高级场景描述创建3D游戏并将3D内容添加到应用程序。轻松添加动画，物理模拟，粒子效果和基于物理的逼真的渲染。 使用教程 SceneKit将高性能渲染引擎与描述性API结合在一起，用于导入，操作和渲染3D资源。与要求您精确实现显示场景的渲染算法的低级API（例如Metal和OpenGL）不同，SceneKit仅需要描述场景的内容以及想要执行的动作或动画。
柱状图表实现（swift）
w463719052的博客
07-19 1273
1.用drawRect的绘制图像功能实现柱状图表。 做的时候没写注释，做完也懒得写了 效果图： 相关代码： import UIKitclass YGHistogramView: UIView { var height:CGFloat = 0 var width:CGFloat = 20 var heightArray:NSMutableArray = [10,1
macOS SwiftUI 图表教程之 02 绘制柱状图BarChart含图例与交互SwiftUICharts (教程含源码)
iCloudEnd的博客
02-08 415
实战需求 macOS SwiftUI 图表教程之 02 绘制柱状图BarChart含图例与交互 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 初始化数据 设置标题 设置图例 支持交互 支持平均线 实战代码 1、主界面 import SwiftUI import SwiftUICharts struct ContentView: View { let data : ChartData = weekOfData() var body: some View
comtech:Comtech月度数据和图表
03-20
"Comtech: Comtech月度数据和图表"这个项目显然与使用JavaScript处理数据和可视化相关。在本项目中，我们可能涉及到以下几个核心知识点： 1. **JavaScript基础**：作为项目的基石，JavaScript的基本语法、变量、...
Excel可视化仪表盘图表大数据、热力地图、财务销售模板：35公司月度开销支出可视化图表.xlsx
最新发布
12-28
Excel可视化仪表盘图表大数据、热力地图、财务销售模板：35公司月度开销支出可视化图表.xlsx
Excel柱形图条形图模板-部门月度考评表营销表单Excel图表
11-24
这种“Excel柱形图条形图模板-部门月度考评表营销表单Excel图表”提供了预设的图表样式，便于快速创建专业且具有吸引力的数据报告。以下是关于使用此类模板进行数据呈现和分析的一些关键知识点： 1. **柱形图与条形...
08第八章我们如何实施月度评估.pdf
09-30
【第八章 我们如何实施月度评估】 月度评估是技术管理中不可或缺的一个环节，旨在促进团队和个人的学习与成长，提高组织效率。然而，传统的评估方式常常仅停留在信息汇报阶段，缺乏互动式对话和共享洞察，导致知识...
macOS SwiftUI完整代码之绘制柱状图
12-13
macOS SwiftUI完整代码之绘制柱状图。1、取消间距VStack(spacing: 0)。2、矩状图Capsule()；3、设置高度.frame(width: 10, height: CGFloat(value))。
SwiftUICharts-使用SwiftUI绘制简单，动画的图表-Swift开发
05-27
该项目显示了一种使用SwiftUI制作一些简单图表的方法。 当它们的数据更改时，会设置动画的ColumnChart，BarChart，LineChart和PieChart。 这些图表的数据是代表百分比的Double值数组。 为了使事情变得容易一些，有一个ChartModel可以使用Double的任何数组并将其转换为百分比值。 SwiftUICharts使用SwiftUI绘制简单，动画的图表此项目显示了一种使用SwiftUI制作一些简单图表的方法。 当它们的数据更改时，会设置动画的ColumnChart，BarChart，LineChart和PieChart。 这些图表的数据是代表百分比的Double值数组。 为了使事情变得容易一些，有一个ChartModel可以使用Double的任何数组并将其转换为百分比值。 一个示例显示了如何使用图表视图，包括自定义日期
SwiftUI 绘图大全之强大又非常易用的纯SwiftUI绘图组件饼状图 柱状图 曲线图 （中文教程含源码）
iCloudEnd的博客
10-18 865
实战需求 SwiftUI 绘图大全之强大又非常易用的纯SwiftUI绘图组件饼状图 柱状图 曲线图 （中文教程含源码） 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 饼状图 柱状图 曲线图 折线图 支持多种图形叠加 实战代码 import SwiftUI struct ContentView: View { var body: some View { ChartView { LineChart(data: [1, 2,
IOS开发之——绘制柱状图(76)
我的博客
01-04 751
一 概述 按照1:1:2的份额划分区域(25:25:50) 分别计算3个柱状图的高度(h)，宽度(w)，横坐标(x)，及纵坐标(y) 绘制柱状图，并给柱状图设置不同的颜色 点击视图，柱状图切换颜色 二 逻辑功能说明 H=viewH*25/100.0 w=viewW/(2*count-1) x=2*w*i y=viewH-H 三 功能实现 3.1 代码 BarView #import "BarView.h" #import "UIColor+RandomColor.h" @implementatio
SwiftUI 图表教程之 01 原生制作柱状图北京全年平均气温（教程含源码）
iCloudEnd的博客
02-06 523
实战需求 SwiftUI 图表教程之原生制作柱状图北京全年平均气温 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 使用VStack,HStack,Text,Rectangle,Capsule基础 rotationEffect旋转 数组转化为Double(item)/Double(alist.max()!) 基础知识 rotationEffect(_⚓️) 围绕指定点旋转该视图的渲染输出。 func rotationEffect(_ angle: Angle, ancho
SwiftUI 中的水平条形图
网罗天下方法，方便你我开发！！！
12-05 3503
水平条形图以矩形条的形式呈现数据类别，其宽度与它们所代表的数值成正比。本文展示了如何在垂直条形图的基础上创建一个水平柱状图。水平条形图不是简单的垂直条形图的旋转。在 等应用程序中，水平条形图被定义为独立的图表类型，而不是垂直条形图。除了条形差异外，x 轴和 y 轴的格式也需要不同。系列文章水平条形图不仅仅是在垂直条形图上的配置，有一些元素是可以重复使用的。对于垂直条形图组件和水平条形图组件来说，重复使用一些结构和SwiftUI视图并不简单。标题和关键区域可以原样重用。创建 的副本，并将其名称改为 。它控
SwiftUI之深入解析如何使用组合矩形GeometryReader创建条形（柱状）图
╰つ栺尖篴夢ゞ
01-12 852
在 SwiftUI 中组合矩形来创建条形图是比较容易的，SwiftUI 是一个很好的平台，用于创建视图和快速重构独立的子视图。在 SwiftUI 中构建条形图需要做一些工作，随着使用数据来试用条形图，可以确定更多的定制化，使用 GeometryReader 可以创建适应更多可用环境的条形图。
Swift - 第三方图表库Charts使用详解14（柱状图1：基本用法）
Dermi
07-24 1202
一、基本用法 1，只有 1 组数据的柱状图 （1）效果图 原文:Swift - 第三方图表库Charts使用详解14（柱状图1：基本用法） （2）样例代码 import UIKit import Charts class ViewController: UIViewController { //柱状图图 var chartView: BarChartView! override func viewDidLoad() { super.viewDidLoad() //创建柱状图组
在所有SwiftUI版本(1.0-4.0)中原生实现Charts图表视图之思路
享受开发，颠倒银河
07-03 636
在本篇博文中，我们在全系列SwiftUI版本（1.0 - 4.0）中分别讨论了实现图表视图的思路，希望能够给大家一些启发。
Swift iOS App开发速成：从入门到实战
- 学习并掌握Tableau的基本操作，如创建工作簿、工作表、转换字段类型、制作图表（如柱形图、符号地图和双柱形图）以及创建仪表板。 - 具体目标有建立工作表如“全国销售情况”、“各产品销售情况”、“各产品利润...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李发展

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值