前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >在 Swift图表中使用Foundation库中的测量类型

在 Swift图表中使用Foundation库中的测量类型

作者头像
韦弦zhy
发布于 2022-11-07 08:27:49
发布于 2022-11-07 08:27:49
2.7K00
代码可运行
举报
运行总次数:0
代码可运行

在 Swift 图表中使用Foundation 库中的测量类型

在这篇文章中,我们将建立一个条形图,比较基督城地区自然散步的持续时间。我们将使用今年推出的新的Swift Charts框架,并将看到如何绘制默认不符合Plottable协议的类型的数据,如Measurement<UnitDuration>

定义图表的数据

让我们先定义一下要在图表中展现的数据。

我们声明了一个包含标题和步行时间(小时)的Walk结构体。我们使用 Foundation 框架中的测量类型Measurement和单位类型UnitDuration来表示每次步行的时间。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
struct Walk {
    let title: String
    let duration: Measurement<UnitDuration>
}

我们在数组works中存储要在图表中显示的数据。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let walks = [
    Walk(
        title: "Taylors Mistake to Sumner Beach Coastal Walk",
        duration: Measurement(value: 3.1, unit: .hours)
    ),
    Walk(
        title: "Bottle Lake Forest",
        duration: Measurement(value: 2, unit: .hours)
    ),
    Walk(
        title: "Old Halswell Quarry Loop",
        duration: Measurement(value: 0.5, unit: .hours)
    ),
    ...
]

尝试直接在图表中使用测量值

让我们定义一个Chart,并将walks数组作为数据参数传递给它。因为我们知道我们的walk标题是唯一的,所以我们可以直接使用它们作为id,但你也可以将你的数据模型改为Identifiable

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Chart(walks, id: \.title) { walk in
    BarMark(
        x: .value("Duration", walk.duration),
        y: .value("Walk", walk.title)
    )
}

注意,因为Measurement<UnitDuration>没有遵守Plottable协议,我们会得到一个错误:「Initializer 'init(x:y:width:height:stacking:)' requires that 'Measurement<UnitDuration>' conform to 'Plottable'」

BarkMark的初始化器期望收到一个用于x和y的PlottableValue参数。而且PlottableValue的值类型必须符合Plottable协议。

我们有几个选择来解决这个错误。我们可以提取测量值的value,它是一个Double类型,它是默认符合Plottable的,我们可以扩展具有Plottable一致性的Measurement<UnitDuration>,或者我们可以定义一个包装了测量的类型并使其符合Plottable协议。

如果我们简单地从测量值中提取,我们就会失去上下文,不知道用什么单位来创建测量值。这意味着,我们将无法正确格式化图表的标签来向用户表示单位。虽然我们可以记住我们在创建测量时使用了小时hours,但这并不理想。例如,我们可以决定以后改变数据模型,以分钟为单位存储持续时间,或者数据可能来自其他地方,所以手动重构单位并不是一个完美的解决方案。

Plottable的一致性来扩展Measurement<UnitDuration>是可行的,但根据Swift中关于外部类型的追溯一致性的警告(Warning for Retroactive Conformances of External Types),如果Swift Charts在未来添加了这种一致性,它可能会被破坏。

我们将研究如何定义我们自己的类型来包装 measurement,并为我们的自定义类型添加Plottable的一致性。

设计一个符合 Plottable 标准的包装器类型

我们将定义一个自定义的PlottableMeasurement类型,并使其成为通用的,所以它可以容纳任何类型的单位的测量类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
struct PlottableMeasurement<UnitType: Unit> {
    var measurement: Measurement<UnitType>
}

然后,我们将为PlottableMeasurement添加Plottable的一致性,其单位为UnitDuration类型。我们可以在将来添加对其他单位的支持。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
extension PlottableMeasurement: Plottable where UnitType == UnitDuration {
    var primitivePlottable: Double {
        self.measurement.converted(to: .minutes).value
    }
    
    init?(primitivePlottable: Double) {
        self.init(
            measurement: Measurement(
                value: primitivePlottable,
                unit: .minutes
            )
        )
    }
}

Plottable协议有两个要求:primitivePlottable属性必须返回原始类型之一,如DoubleStringDate,以及一个可失败的初始化器,从原始plottable类型创建一个值。

我决定将测量值转换为分钟,但你可以选择适合你需要的任何其他单位。只是在与原始值转换时要使用相同的单位,这一点很重要。

我们现在可以更新我们的图表,以使用我们的自定义Plottable类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Chart(walks, id: \.title) { walk in
    BarMark(
        x: .value(
            "Duration",
            PlottableMeasurement(measurement: walk.duration)
        ),
        y: .value("Walk", walk.title)
    )
}

它可以工作,但X轴上的标签没有格式化,没有向用户显示测量单位。我们接下来要解决这个问题。

步行时间柱状图的截图,X轴上的标签显示为分钟数,但没有单位

显示带有测量单位的格式化标签

为了定制X轴上的标签,我们将使用chartXAxis(content:)修改器,并用传递给我们的值重构x轴的标记。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Chart(walks, id: \.title) { ... }
    .chartXAxis {
        AxisMarks { value in
            AxisGridLine()
            AxisValueLabel("""
            \(value.as(PlottableMeasurement.self)!
                .measurement
                .converted(to: .hours),
            format: .measurement(
                width: .narrow,
                numberFormatStyle: .number.precision(
                    .fractionLength(0))
                )
            )
            """)
        }
    }

我们首先添加网格线,然后重构给定值的标签。

AxisValueLabel在初始化器中接受一个LocalizedStringKey,它可以通过插值测量和指定其格式风格来构建。

我们收到的值是使用我们在Plottable一致性中定义的初始化器创建的,所以在我们的案例中,测量值是以分钟为单位提供的。但我相信对于这个特定的图表,使用小时会更好。我们可以很容易地将测量值转换为插值内部所需的单位。在这里,我们确定该值是PlottableMeasurement类型的,所以我们可以强制解包类型转换。

我选择了缩小的格式和小数点后零位数作为数字样式,但你可以根据你的具体图表调整这些设置。

最后的结果是在X轴上显示以小时为单位的格式化持续时间。

步行时间柱状图的截图,X轴上的标签显示了以小时为单位的格式化数字

你可以从我们的GitHub repo中获得这篇文章中使用的项目的完整示例代码

Using Measurements from Foundation for values in Swift Charts https://nilcoalescing.com/blog/UsingMeasurementsFromFoundationAsValuesInSwiftCharts/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-10-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
在 Swift 图表中使用 Foudation 库中的测量类型
在这篇文章中,我们将建立一个条形图,比较基督城地区自然散步的持续时间。我们将使用今年推出的新的Swift Charts 框架,并将看到如何绘制默认不符合 Plottable 协议的类型的数据,如 Measurement<UnitDuration>。
Swift社区
2022/12/12
2.5K0
在 Swift 图表中使用 Foudation 库中的测量类型
Swift网络爬虫与数据可视化的结合
前言 在当今数字化时代,数据的重要性不言而喻。Swift,作为一种现代的编程语言,以其高性能、易用性和安全性,成为了开发iOS和macOS应用的首选。本文将探讨如何使用Swift来开发一个网络爬虫,以及如何将爬取的数据进行可视化展示。
小白学大数据
2024/07/15
1330
【译文】数据可视化的10个关键术语①
Format 交互方式 Interactive visualisations allow you to modify, manipulate and explore a computer-based display of data. The vast majority of interactive visualisations are found on websites but increasingly might also exist within apps on tablets and smart
小莹莹
2018/04/20
8340
【译文】数据可视化的10个关键术语①
Swift 中的 Phantom(幻象)类型
模糊的数据可以说是一般应用程序中最常见的错误和问题的来源之一。虽然 Swift 通过其强大的类型系统和完善的编译器帮助我们避免了许多含糊不清的来源——但只要我们无法在编译时保证某个数据总是符合我们的要求,就总是有风险,我们最终会处于含糊不清或不可预测的状态。
韦弦zhy
2022/04/26
8980
Swift 中的幻象类型
模糊的数据可以说是一般应用程序中最常见的错误和问题的来源之一。虽然 Swift 通过其强大的类型系统和完善的编译器帮助我们避免了许多含糊不清的来源——但只要我们无法在编译时保证某个数据总是符合我们的要求,就总是有风险,我们最终会处于含糊不清或不可预测的状态。
Swift社区
2022/05/19
1.5K0
再也不被时间束缚:C++ std::chrono时间库全面解析
C++ std::chrono时间库是C++标准库提供的一个时间处理库,提供了一个方便、灵活和精确的时间处理工具,用于在程序中进行时间相关的操作和计算。它具有以下重要性和作用:
Lion Long
2024/10/23
1.3K0
再也不被时间束缚:C++ std::chrono时间库全面解析
Visifire图表控件的使用「建议收藏」
1.在实际项目开展中,往往会牵扯到需要绘制图表的情况。而Visifire是一个比较美观大方的第三方图表控件,本文会讲 述如何初步使用Visifire控件。 首先我们需要从Visifire的官方网站下载:http://www.visifire.com/,新建一个项目,引入SLVisifire.Charts.dll。在 MainPage.xaml.cs代码中添加代码:using Visifire.Charts; 准备工作做好了,此时我在这里直接编写了一个函数如下: /// /// 创建一个图表 /// /// 表名字 /// 时间段的集合 /// 对应时间段集合的值 /// 本表在主Grid里面的ROW值 /// 本表在主Grid里面的column值 /// Y轴的后缀 /// 时间段间隔 /// 图表两点之间的间隔 /// 图表的X轴坐标按什么来分类,如时分秒 public void CreateChart(string tableName, List updateTime, List value, int row, int column, string rihgtStr, TimeSpan tspan, int chartInterval, IntervalTypes intervaltype) { // 创建一个图标 Chart chart = new Chart(); // 设置图标的宽度和高度 chart.Width = 500; chart.Height = 400; chart.ToolBarEnabled = true; // 设置图标的属性 chart.ScrollingEnabled = false; chart.View3D = true; // 创建一个标题的对象 Title title = new Title(); // 设置标题的名称 title.Text = tableName; title.Padding = new Thickness(0, 10, 5, 0); // 向图标添加标题 chart.Titles.Add(title); // 初始化一个新的Axis Axis xAxis = new Axis(); // 设置axis的属性 //图表的X轴坐标按什么来分类,如时分秒 xAxis.IntervalType = intervaltype; //图表中的X轴坐标间隔如2,3,20等,单位为xAxis.IntervalType设置的时分 秒。 xAxis.Interval = chartInterval; //设置X轴的时间显示格式为7-10 11:20 xAxis.ValueFormatString = “hh:mm:ss”; //给图标添加Axis chart.AxesX.Add(xAxis); Axis yAxis = new Axis(); //设置图标中Y轴的最小值永远为0 yAxis.AxisMinimum = 0; //设置图表中Y轴的后缀 yAxis.Suffix = rihgtStr; chart.AxesY.Add(yAxis); for (Int32 j = 0; j < 1; j++) { // 创建一个新的数据线。 DataSeries dataSeries = new DataSeries(); // 设置数据线的格式。 dataSeries.RenderAs = RenderAs.Line; dataSeries.XValueType = ChartValueTypes.DateTime; // 设置数据点 DataPoint dataPoint; for (int i = 0; i < updateTime.Count; i++) { // 创建一个数据点的实例。 dataPoint = new DataPoint(); // 设置X轴点 dataPoint.XValue = updateTime[i]; //设置Y轴点 dataPoint.YValue = double.Parse(value[i]); 通过此函数我们可以很方便的创建了一个Visifire图表,其创建的步骤那些我在这里不细说,大家直接看源码上的注释 就可以了。因为我使用的Visifire是免费的版本,所有会有水印,在使用的过程中可以创建一个白色背景的StackPanel 来遮盖住水印的位置。在这个函数执行的时候,还为每个DataPoint点加载了一个点击事件,处理当这些点被点击之后 触发的事件(在事件里面获取DataPoint的X轴,Y轴等,以便进行相关操作),其源码如下: dataPoint.MarkerSize = 8
全栈程序员站长
2022/09/13
9640
C++中时间相关函数用法详解
C++标准库中的 <chrono> 头文件提供了一套用于处理时间的工具,包括时钟、时间点和持续时间等。下面是 <chrono> 库的一些主要组件及其使用示例:
Linux兵工厂
2024/04/01
2640
C++中时间相关函数用法详解
Day3 AntV/G2图表的组成
完整的G2图表组成如下图所示:可以看出图表主要由axes(坐标轴axis的复数),tooltip(提示信息),guide(辅助元素),legend(图例),geom(几何标记 即用何种图形来展示数据,此处为点图)组成的,理解了基本组成,接下来看一下代码的编写。
IT人一直在路上
2019/09/16
1.3K0
Day3 AntV/G2图表的组成
使Excel图表网格线呈正方形的VBA代码
Excel在缩放图表轴方面做得相当好,但有时你希望它能做得更好。下图1所示的XY散点图显示了一种情况,所有点的X和Y值都在0和7之间,但由于图表本身是矩形的,因此网格线沿X和Y轴的间距不同。如果沿两个轴的间距相同,并提供正方形网格线,不是更好吗?
fanjy
2022/03/07
2.3K0
使Excel图表网格线呈正方形的VBA代码
在 iOS16 中用 SwiftUI 图表定制一个线图
在 iOS 16 中引入的 SwiftUI 图表,可以以直观的视觉格式呈现数据,并且可以使用 SwiftUI 图表快速创建。本文演示了几种定制折线图并与区域图结合来展示数据的方法。
Swift社区
2022/12/12
2.7K0
在 iOS16 中用 SwiftUI 图表定制一个线图
对iOS应用中的文本进行本地化
作为一个程序员,如果让你考虑设计一套逻辑对原始文本针对不同语言的进行本地化转换,我想大多数人都会考虑使用字典(键值对)的解决方案。苹果也是采取了同样的处理,通过创建针对不同语言的多个字典,系统可以轻松的查找出一个原始文本(键)对应的本地化文本(值)。比如:
东坡肘子
2022/07/28
2.2K0
对iOS应用中的文本进行本地化
Android 图表开发开源库MPAndroidChart
图1的效果不是用这个实现的,如果感兴趣可以参考我这篇文章  Android渐变圆环
再见孙悟空_
2023/02/10
2K0
Android 图表开发开源库MPAndroidChart
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?
最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库,下文将对3种图表库进行分析比对。
用户2356368
2022/09/16
3.4K0
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?
手绘效果为图表添色,cutecharts带你画Q版可视图|可视化系列04
Matplotlib默认主题下绘制的可视化图形如一位高贵冷艳、不沾烟火的冰山女神,而cutecharts的图就像不拘常规、潇洒无羁的活力少年。
蛰虫始航
2020/05/14
1.2K0
手绘效果为图表添色,cutecharts带你画Q版可视图|可视化系列04
dotnet OpenXML 解析 PPT 图表 解析日期时间表示内容
在 OpenXML 里的图表存放的日期时间很多存放的是数值,需要进行转换才能获取到用户可见的字符串
林德熙
2023/04/07
6340
dotnet OpenXML 解析 PPT 图表 解析日期时间表示内容
在iOS 16中用SwiftUI Charts创建一个折线图
苹果在WWWDC 2022上推出了SwiftUI图表,这使得在SwiftUI视图中创建图表变得异常简单。图表是以丰富的格式呈现可视化数据的一种很好的方式,而且易于理解。本文展示了如何用比以前从头开始创建同样的折线图少得多的代码轻松创建折线图。此外,自定义图表的外观和感觉以及使图表中的信息易于访问也是非常容易的。
韦弦zhy
2022/11/07
3.5K0
在iOS 16中用SwiftUI Charts创建一个折线图
Swift 周报 第十二期
本期是 Swift 编辑组自主整理周报的第三期,每个模块还在调整磨合期。各位读者如果有好的提议,欢迎在文末留言。
Swift社区
2022/12/12
2.6K0
Swift 周报 第十二期
手绘风格的 JS 图表库:Chart.xkcd
图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库:一个手绘风格的 JS 图表库 —— Chart.xkcd,快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。
HelloGitHub
2021/05/14
2.5K0
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?广而告之
最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库,下文将对3种图表库进行分析比对。
用户2356368
2019/04/03
1.3K0
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?广而告之
相关推荐
在 Swift 图表中使用 Foudation 库中的测量类型
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文