SwiftUI 4.0 中原生图表(Charts)实现超长内容滚动功能

已于 2022-08-29 10:53:21 修改
阅读量2.9k 收藏 1
点赞数 3
分类专栏： 开发疑难秒懂百科 文章标签： SwiftUI iOS 16 Charts 滚动 分页
于 2022-08-29 10:50:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mydo/article/details/126569381
版权
开发疑难秒懂百科 专栏收录该内容
188 篇文章 131 订阅 ¥69.90 ¥99.00
订阅专栏

在这里插入图片描述



功能需求

SwiftUI 4.0给我们带来了 iOS 16 中美美哒的原生图表（Charts)。

不过，默认的 Charts 是将全部项目一起显示在视图中，如果图表中需要显示的数据很多，就会挤压在一起很难分辨彼此：

在这里插入图片描述

能不能让 Charts 滚动着分页显示海量数据呢？

在这里插入图片描述

如上图所示，在包含了200条数据的 SwiftUI 4.0 原生 Chart 视图中，我们悠然自得的通过分页依次显示了所有数据，可以发现滚动极其流畅。

这是怎么做到的呢？

无需等待，Let’s go!!! 😉


功能分析

1. 第一种变通实现

该实现的灵感来自WWDC22中 Build a productivity app for Apple Watch 教程。

不过

了解本专栏 订阅专栏 解锁全文
大熊猫侯佩
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
SwiftUI 4 新功能之规则标记和组合图表Rule Mark & Combined Chart
iCloudEnd的博客
07-11 500
使用 Apple Charts，我们可以在 SwiftUI 中获得声明性图表。今天我们将介绍另一种新的标记类型，称为RuleMark，我们将在组合图表示例中看到它的用例。让我们从数据结构和示例数据开始： Combined Chart 我们可以在图表视图中将多个标记组合为子视图，因此让我们将折线图与渐变面积图放在一起，以绘制一周的步行锻炼会话。 点标记 我们将使用 PointMark 在此图表上绘制符号点并注释数据点。 规则标记 我们将 RuleMark 绘制目标锻炼线：...
SwiftUICharts：强大的图表库，为你的应用增添视觉魅力
最新发布
gitblog_00062的博客
05-17 219
SwiftUICharts：强大的图表库，为你的应用增添视觉魅力 项目地址:https://gitcode.com/willdale/SwiftUICharts SwiftUICharts 是一款专为 SwiftUI 设计的跨平台图表库，支持 macOS, iOS, watchOS 和 tvOS 系统。它内建了可访问性和本地化特性，使数据可视化变得简单且直观。 一、项目介绍 SwiftUIChar...
SwiftUICharts:一个简单的折线图和条形图库，支持使用SwiftUI编写的可访问性
03-17
SwiftUI图表 一个简单的折线图和条形图库，支持使用SwiftUI编写的可访问性。 用法 垂直条形图 let highIntensity = Legend ( color : . orange , label : " High Intensity " , order : 5 ) let buildFitness = Legend ( color : . yellow , label : " Build Fitness " , order : 4 ) let fatBurning = Legend ( color : . green , label : " Fat Burning " , order : 3 ) let warmUp = Legend ( color : . blue , label : " Warm Up " , order : 2 ) let low = Legend
探索SwiftUICharts：一款强大的SwiftUI图表库
gitblog_00073的博客
03-25 419
探索SwiftUICharts：一款强大的SwiftUI图表库 项目地址:https://gitcode.com/mecid/SwiftUICharts 在开发iOS应用时，数据可视化是不可或缺的一部分。它可以帮助我们以直观的方式展示复杂信息。SwiftUICharts是一款由Mecid开发的开源项目，专门用于SwiftUI环境的数据可视化，提供了丰富的图表类型和高度定制化的能力。在这篇文章中，我...
SwiftUICharts-使用SwiftUI绘制简单，动画的图表-Swift开发
05-27
该项目显示了一种使用SwiftUI制作一些简单图表的方法。 当它们的数据更改时，会设置动画的ColumnChart，BarChart，LineChart和PieChart。 这些图表的数据是代表百分比的Double值数组。 为了使事情变得容易一些，有一个ChartModel可以使用Double的任何数组并将其转换为百分比值。 SwiftUICharts使用SwiftUI绘制简单，动画的图表此项目显示了一种使用SwiftUI制作一些简单图表的方法。 当它们的数据更改时，会设置动画的ColumnChart，BarChart，LineChart和PieChart。 这些图表的数据是代表百分比的Double值数组。 为了使事情变得容易一些，有一个ChartModel可以使用Double的任何数组并将其转换为百分比值。 一个示例显示了如何使用图表视图，包括自定义日期
SwiftUICharts:在SwiftUI中构建图表包
03-15
SwiftUI图表 SwiftUI的图表/绘图库。 可在macOS，iOS，watchOS和tvOS上运行，并内置有辅助功能。 图表类型 折线图 折线图 使用LineChartData数据模型。 LineChart ( chartData : LineChartData) 实线图 使用LineChartData数据模型。 FilledLineChart ( chartData : LineChartData) 多折线图 使用MultiLineChartData数据模型。 MultiLineChart ( chartData : MultiLineChartData) 远程折线图 使用RangedLineChart数据模型。 RangedLineChart ( chartData : RangedLineChartData) 条形图 条形图 使用BarChartData数据
SwiftUI——如何使用自带的原生图表（Charts）
ZhongUncle的博客
09-23 3122
在 WWDC2022 上，苹果为 SwiftUI 提供了图表相关的包Charts，这下就不用自己费劲实现图表功能了。代码量一下子从四五百行变成了十几行，甚至几行。如果是老系统的话还是得手写。自定义颜色，线图点图条形图，颜色，组合，自定义
swiftui图表：具有自定义样式的SwiftUI图表
02-04
swiftui图表：具有自定义样式的SwiftUI图表
SwiftCharts：易于使用且高度可定制的iOS图表库
02-03
迅捷图表 易于使用且高度可定制的iOS图表库 特征： 条形-普通，堆叠，分组，水平，垂直 分散 线（直线/立方/自定义路径生成器） 地区 泡沫 多轴 烛台 每个值多个标签（x轴） 一切都是可定制的-颜色，视图，单位...
vue-cli和v-charts实现可视化图表过程解析
10-16
主要介绍了vue-cli和v-charts实现可视化图表过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
iOS 图标库 Charts 设置可滑动
ZCLegendary的博客
11-14 2249
源码地址:https://github.com/danielgindi/Charts lineChartView.zoom(scaleX: 4, scaleY: 1, x: 0, y: 0) //设置缩放倍数 lineChartView.setScaleEnabled(false) //不允许缩放 这样设置完成后,就不会识别 pinch 收拾缩放了,而且x 坐标很多可以滑动...
一个简单的折线图和条形图库，支持使用SwiftUI编写的可访问性。-Swift开发
05-27
一个简单的折线图和条形图库，支持使用SwiftUI编写的可访问性。 SwiftUICharts一个简单的折线图和条形图库，支持使用SwiftUI编写的可访问性。 用法垂直条形图let highIntensity = Legend（颜色：.orange，标签：“高强度”，顺序：5）let buildFitness = Legend（颜色：.yellow，标签：“ Build Fitness”，顺序：4）let fatBurning = Legend （颜色：.green，标签：“ Fat Burning”，命令：3）let warmUp =图例（颜色：.blue，标签：“ Warm Up”，命令：2）let low =图例（颜色：.gray，标签： “低”，顺序：1）让极限= Dat
swift-swift-linechart-功能完整实用的iOS折线图组件
08-15
swift-linechart - 功能完整、实用的iOS折线图组件。使用方便，参数配置简单。是不可多得的优质组件--swift。
ios-charts框架制作的柱状图swift和oc混编的可滚动放大缩小.zip
07-11
利用github上的开源框架charts 3.0的版本，需要xcode8 ,swift3.0的版本才可使用,需要进行swift3.0语言转换,http://www.jianshu.com/p/2d7f64011dca 操作说明,本程序只是简单了制作一个柱形图,仅做参考学习,没有封装,需要的可进行下载
极其精美而又强大的 iOS 图表组件库,支持柱状图、条形图、折线图、等等图表.zip
10-12
极其精美而又强大的 iOS 图表组件库,支持柱状图、条形图、折线图、等等图表.zip,An elegant and friendly data visualization chart framework for Apple developers . Extremely powerful ,supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.极其精美而又强大的跨平台数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充…
Swift版本Charts图表库的使用
04-26
Charts 图表库的使用,实现折线图(类似炒股软件), 柱状图
macOS SwiftUI 图表教程之 03 绘制多彩柱状图BarChart含图例与交互SwiftUICharts (教程含源码)
iCloudEnd的博客
02-08 358
实战需求 macOS SwiftUI 图表教程之 03 绘制多彩柱状图BarChart含图例与交互SwiftUICharts (教程含源码) 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 初始化数据 设置标题 设置图例 支持交互 支持平均线 实战代码 1、主界面 import SwiftUI import SwiftUICharts struct ContentView: View { let data : ChartData = weekOfData()
iOS 17（SwiftUI 5.0）带来的图表（Charts）新类型：“大饼”与“甜甜圈”
享受开发，颠倒银河
06-09 2162
在本篇博文中，我们介绍了 WWDC 23 最新 SwiftUI 5.0（iOS 17）中关于图表的新体验，学习了如何创建饼图（Pie）和实现 Charts 元素的选中功能，小伙伴们还不赶快操练起来！
macOS SwiftUI 图表教程之 02 绘制柱状图BarChart含图例与交互SwiftUICharts (教程含源码)
iCloudEnd的博客
02-08 392
实战需求 macOS SwiftUI 图表教程之 02 绘制柱状图BarChart含图例与交互 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 初始化数据 设置标题 设置图例 支持交互 支持平均线 实战代码 1、主界面 import SwiftUI import SwiftUICharts struct ContentView: View { let data : ChartData = weekOfData() var body: some View
swift charts 滚动
10-09
Swift Charts是一种用Swift编程语言开发的图表库，可以用来在iOS应用程序中展示各种类型的图表。它包含了丰富的图表样式和交互功能，可以使用户更加直观地理解数据。 在Swift Charts中实现滚动的功能其实是通过配合其他相关的UIKit组件来实现的。首先，需要将图表放置在一个UIScrollView中。然后，通过设置UIScrollView的contentSize属性来确定滚动区域的大小。当图表的尺寸超过了UIScrollView的尺寸时，用户就可以通过滚动来查看图表的完整内容。 要实现滚动功能，可以利用UIScrollView的滚动代理方法来监听滚动的事件，并相应地更新图表的显示范围。例如，当UIScrollView滚动时，可以通过监听其contentOffset属性的变化来计算出图表需要显示的数据范围，并更新图表的显示内容。 此外，可以使用手势识别器来实现更加灵活的滚动效果。例如，可以添加一个UIPanGestureRecognizer手势识别器来捕捉手指在图表上的滑动动作，并根据滑动距离来更新图表的显示位置。 总之，通过合理利用UIScrollView和手势识别器，配合Swift Charts图表库的功能，就能够实现在iOS应用程序中展示滚动图表的效果。这样用户就可以自由地滚动和查看图表的内容，从而更好地理解数据的趋势和关系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

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

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

打赏作者

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

抵扣说明：

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

余额充值