财经

争以 Swift 语言下用 iOS Charts API 制作精美图表?

10 9月 , 2018  

继08金融危机后,市场经济逐步积累泡沫的成分。而对此电商p2p,B2B,B2C等等新型互联网崛起,充满了众人的生活现实中,不乏让科普的customs带来了有利带来了收益,这对于实体经济是一个沉重的打击和排斥,传统型行业面临着同软伟大的考验,或许兴盛,或许衰落。按目前底图景来拘禁,后者的挑战更严峻,更切合实际。记得在上年上,李大霄在一个经济节目齐一直说:证券市场触顶,泡沫积淀,泡沫满天飞,不清楚发生微大众,有小投资者对是从时有发生成立的认识,意识及了高风险。还有他说的婴儿底等等…

开创一个柱形图

开拓 BarChartViewController.swift 文件,添加以下声明。

import Charts

打开故事板文件。我们用上加用来展示图表的视图。从文档纲要中摘 Bar
Chart View Controller,并当性质检查器中取消 Extend Edges 的 Under Top
Barsin 选项。我们不愿意图表自动延长至导航栏下方。

财经 1

哪些当Swift语言下用iOS Charts API制作地道图表

随后拖拽一个视图到 Bar Chart View Controller
中,并遵照下图定位边界。该视图为控制器中主视图的子视图。

财经 2

何以在Swift语言下用iOS Charts API制作精良图表

视图被入选后,在甄别检查器中将其的类设为
BarChartView。再以助理编辑器,加入视图的 outlet 到
BarChartViewController 类,并取名也 outletbarChartView。在
BarChartViewController 类中上加下列代码。

@IBOutlet weak var barChartView: BarChartView!

运作项目,并从表中精选柱形图,你或会见获视图提示信息:无可用的图片数据。

财经 3

哪些当Swift语言下用iOS Charts API制作地道图表

若以无多少来发生图表时,你想当空状态显示任何的音,这时候可以从定义之提示信息。在
viewDidLoad()函数底部,加入下列代码。

运转该档,可以看到于定义之提示信息。

而可吗下信息更是增长描述。这得用来为用户说,为什么图表是空的,他们需要获取数据来生成图表。例如:健身
App 应该吃用户知道当收拾图表分析之前,他们得事先记下跑步数据。

barChartView.noDataTextDescription = "GIVE REASON"

增长下面的习性到此类。我们就此其来存储一些图纸的拟数据。

var months: [String]!

用脚的函数添加到此类,用以建立图表。

func setChart(dataPoints: [String], values: [Double]) {
    barChartView.noDataText = "You need to provide data for the chart."

}

吁小心,我已经当 viewDidLoad()函数中上加了声称。现在打
viewDidLoad()中易除了该声明。我们将据此 setChart()来自定义图表。

当 viewDidLoad()中,添加以下内容到函数底部。

months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]

setChart(months, values: unitsSold)

我们装有效仿数据,给有一部分成品一样年被每个月份货出的单位多次。然后,我们用数据传于
setChart()。

吃一个图显示数据,我们尚索要创建一个 BarChartData 对象,并拿该设置为
barChartView 的数量性。添加底的代码到 setChart()函数底部。

var dataEntries: [BarChartDataEntry] = []

for i in 0..<dataPoints.count {
    let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
    dataEntries.append(dataEntry)
}

let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "Units Sold")
let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
barChartView.data = chartData

以上代码中,我们创建了一个 BarChartDataEntry
对象的数组。BarChartDataEntry
初始化需要每个数据项的价、其相应之类型目录以及一个任意的价签。

紧接着,我们利用这目标创建 BarChartDataSet,主要用来传递
BarChartDataEntry 对象的高频组,以及描述数据的签。

末,我们为此其来创造一个 BarChartData 对象,用来设定我们图表视图的多少。

运转该行使,可以看出如下图所显示有数量的柱形图。

财经 4

哪些当Swift语言下用iOS Charts API制作地道图表

而可啊出现于视图右下方的图纸设置验证。默认情况下,文本可用来安「说明」,该证会并发在图纸上。参考
ofMPAndroidChart 文档,你可以改描述的职位,但看一下
iOS

API,这并没包括在内。函数库仍在护,所以可能会见于事后加上。如果你想更改描述的职位,你可修改
ChartViewBase 类(是 BarChartView 类的子类)中的
drawDescription(上下文)函数。

针对本利用,我们移除描述文本。在
setChart()函数的平底添加下列内容,将讲述文本设为空字符串。

barChartView.descriptionText = ""

15年下半年,经济市场如碰上狂风暴雨一样,市场一片狼藉,可谓是投资者们的均等截黑暗时光。为什么呢?因为泡沫破灭了,因为经济进入了调整期,正在退化。我本人为是更了这段黑暗时光,感受颇为深刻。还记5100沾时,我刚刚为里面赶呢,现在考虑呢是最最嫩了立,心态也坏,无非就是是瞎弄,凭运气这样的。还记昨天羁押之题《以贸易为生》中提及到:成功之贸易包含几万分因素(方法and心态and资金管理and…),在投资时如果无好之一个认识经济现状,很爱掉入雅坑,举个例吧:你账户亏损30只百分点,相对于要您只要恢复至您原来账户资金时,就持续要赚30百分点,而是60几乎竟更胜之一个赚。所以措施主要。除了一个好之方还要有好之明察秋毫之工本管理方法,对于经济市场之参与者来说在泡还尚未熄灭时候,也要来合理的基金管理,短期交易者一般选2%的老本管理,但对此天内交易者来说也许好确切的更动,但对新手而言不建议日内交易。当资金管理应用6%或亏损时候,风险即大了众博。所以判断经济市场现状以及证券市场现状就是显示更加重大,毕竟金融市场不是那容易懂和要盘活准备。泡沫有,但如我们好好准备了,那就算无见面对咱来那大之有害,甚至可能是一个好之读书时。最后想大家能够出一个好心气,别忘了微笑。晚安

财经 5

散点图(以方形、三角形、圆形等图例)

财经 6

争以Swift语言下用iOS Charts API制作可以图表

结束语

本篇文章大致介绍了利用 ios-charts
库创建的组成部分图纸类型,大概涉及了起定义图表的有些情。如果你想知道这库房底另职能,你可参考这下载库自带的
ChartsDemo
项目之代码,也堪省该型之维基百科。其一链接至
Wiki 页面会带及 MPAndroidChart
项目文档。作者以形容就首文章时,还并未仓库底
iOS
版本的文档说明,但实则 API 跟 Android
版本约95%都平等,当您百相思不得其解时,Android 文档仍然可以派上用场。

您得于这边下载总体项目。

下列有可创造的图片类型。

复多图

现在咱们看一下外几单图表。大部分我们还扣留了了,所以不再了多废话。

率先,在故事板文件被找到图表视图控制器,在辨认检查器中,设定视图的签吗
Pie Chart View 的好像为 PieChartView。

如下所示修改 ChartsViewController 类。

import UIKit
import Charts

class ChartsViewController: UIViewController {

    @IBOutlet weak var lineChartView: LineChartView!
    @IBOutlet weak var pieChartView: PieChartView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
        let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0]

        setChart(months, values: unitsSold)

    }

    func setChart(dataPoints: [String], values: [Double]) {

        var dataEntries: [ChartDataEntry] = []

        for i in 0..<dataPoints.count {
            let dataEntry = ChartDataEntry(value: values[i], xIndex: i)
            dataEntries.append(dataEntry)
        }

        let pieChartDataSet = PieChartDataSet(yVals: dataEntries, label: "Units Sold")
        let pieChartData = PieChartData(xVals: dataPoints, dataSet: pieChartDataSet)
        pieChartView.data = pieChartData

        var colors: [UIColor] = []

        for i in 0..<dataPoints.count {
            let red = Double(arc4random_uniform(256))
            let green = Double(arc4random_uniform(256))
            let blue = Double(arc4random_uniform(256))

            let color = UIColor(red: CGFloat(red/255), green: CGFloat(green/255), blue: CGFloat(blue/255), alpha: 1)
            colors.append(color)
        }

        pieChartDataSet.colors = colors


        let lineChartDataSet = LineChartDataSet(yVals: dataEntries, label: "Units Sold")
        let lineChartData = LineChartData(xVals: dataPoints, dataSet: lineChartDataSet)
        lineChartView.data = lineChartData

    }

}

以上代码中,我们拿 Charts
框架导入类中,像之前创建柱形图那样,创建一个饼状图和一个带状图。但用专注的凡,在柱形图表例中我们利用的是
BarChartDataEntry,而现在以父类 ChartDataEntry 创建数量项。

运转应用,选择表格视图中之任何图表,可以看见一个线形图和发颜色之饼状图。你的用或与产图无完全相同,因为饼状图的颜色是轻易的。

财经 7

何以在Swift语言下用iOS Charts API制作精良图表

本篇文章被,我们主要介绍由 Daniel Cohen Gindi 开发的 ios-charts
library。ios-charts
是由于 Philipp Jahoda 建立之,是格外流行的 Android 库
MPAndroidChart

iOS
端口。有矣此库房,你可以方便快捷地当以中添加不同品种的图。仅需寥寥几推行代码,就得打造有成效全、交互性强之图纸,并且高度可定制。

K线图(针对经济数据)

财经 8

怎在Swift语言下用iOS Charts API制作可以图表

由定义图表

若得改部分属性来自定义图表视图的外观。下面我们来具体介绍,你也可浏览文档看看如何可以从定义。

第一,我们修改柱形图的默认颜色。添加下列设置到 setChart()函数的根。

chartDataSet.colors = [UIColor(red: 230/255, green: 126/255, blue: 34/255, alpha: 1)]

如上代码设置了和数量相关的颜料。将欠设定让 UIColor
对象往往组。因此只要数组中发出同样种植颜色,所有的实业均可用。

财经 9

怎么样以Swift语言下用iOS Charts API制作精美图表

苟您想叫各一个数据对象设置不同之颜料,那么你得提供再多之水彩,本例中需要12种植。如果您的颜色数量少于实体总数,那么自从以到右手将不同的颜色分配受柱形图,直到颜色用完后还开分配。

API
中呢打带一些预定义颜色模板,你可就此它们来吗数量项设定不同颜色,它们包括:

  • ChartColorTemplates.liberty()
  • ChartColorTemplates.joyful()
  • ChartColorTemplates.pastel()
  • ChartColorTemplates.colorful()
  • ChartColorTemplates.vordiplom()

正如所示,使用 ChartColorTemplates.colorful()模板。

chartDataSet.colors = ChartColorTemplates.colorful()

财经 10

什么当Swift语言下用iOS Charts API制作地道图表

如下所示修改 X 轴标签的职务。

barChartView.xAxis.labelPosition = .Bottom

今签在图纸底部。

财经 11

安当Swift语言下用iOS Charts API制作地道图表

以以下方法可以改图表的背景色。

barChartView.backgroundColor = UIColor(red: 189/255, green: 195/255, blue: 199/255, alpha: 1)

根据上述设定,你见面相如下所显示之界面。

财经 12

如何以Swift语言下用iOS Charts API制作好图表

展现大量数目常常,比打表格中一行行枯燥的数量,使用图表来像地意味着数据好辅助用户还好地了解。在图片中,不需通读所有数据资料,便会很爱地问询多少模式,从而获取重要信息。图表的采取在商业
App 和健身 App 中格外常见。

气泡图(由卵泡区域覆盖来代表值)

财经 13

怎么样以Swift语言下用iOS Charts API制作精美图表

开始吧!

率先、下载本篇文章以会为此到之初步示例——名也 iOSChartsDemo
的大概应用。应用运行时,你见面视出少数只类别的报表:条形图和另外图表。当点击项目时,会赢得空白的视图。在本例中,笔者已创造了如果就此之少数单视图控制器:BarChartViewController
和 ChartsViewController。

随着,我们添加函数库到路遭到。你可用
CocoaPods
安装该库,这里我们一直手动安装。

下载 ios-charts
项目,这个
zip 文件包含了函数库(名吧 Charts 的文本夹)和一个演示项目(名吧
ChartsDemo)。如果您想打听又多关于函数库的学识,示例项目是十分过硬的资源。

解压缩已下载的文件,并拿 Charts
文件复制粘贴到公种(iOSChartsDemo)的一干二净目录下。在 Finder
中开拓Charts文件,并将 Charts.xcodeproj 拖拽到 Xcode
项目蒙。结构要下图所著。

财经 14

什么样在Swift语言下用iOS Charts API制作精良图表

跟着从品种导航中选取你的档次,并保证该 iOSChartsDemo
目标被入选。在右侧边的健康选项卡中找到 Embedded Binaries
部分,点击该有的的+声泪俱下加加图框架。从列表中挑选 Charts.framework
并点击 Add。

财经 15

怎么样以Swift语言下用iOS Charts API制作精美图表

假设你想以 Objective-C 中运用函数库,请参见运用说明。

为此 Command-B 或选择 Product > Build
来转项目。如果未这样做,当您导入 Charts 框架到公的品种时,Xcode
会报错——无法加载 Charts 底层模块。

今初步创造第一只图表。

复合图(柱形图跟线图)

财经 16

争以Swift语言下用iOS Charts API制作精美图表

线图(立方线)

财经 17

哪些当Swift语言下用iOS Charts API制作地道图表

线图(单数据组)

财经 18

怎么当Swift语言下用iOS Charts API制作精美图表

  • 8种不同的图形类型;
  • 片独轴的缩放(用触控手势、分轴缩放或捏拉缩放);
  • 拖拽/平移(用触控手势);
  • 图片结合(线形图、柱形图、离散图、K 线图、气泡图);
  • 双(分开的)Y 轴;
  • 指画图(用触控手势将数值画入图表);
  • 数值突出展示(自定义弹出视图);
  • 差不多只/分离之轴;
  • 积存图表到相册/以 PNG/JPEG 格式输出;
  • 预约义颜色模板;
  • 图例(可自动生成,可打定义);
  • 从自然义轴(包括 X 和Y 轴);
  • 卡通(在 X 轴和 Y 轴上确立动画);
  • 止(提供额外信息,比如最老值等);
  • 不折不扣自定义(上色、字体、图例、颜色、背景、手势、虚线等)。

部数库底重中之重特征:

雷达图(蛛网图)

财经 19

怎样当Swift语言下用iOS Charts API制作精彩图

本文系
OneAPM
工程师编译整理。OneAPM
是使用性能管理领域的新兴领军企业,能支援公司用户以及开发者轻松实现:缓慢的程序代码和
SQL 语句之实时抓取。想读更多技术文章,请看 OneAPM
官方博客。

界限

止是指向所有线形图、柱形图与离散图的附加功能。它同意以图纸中显额外的线条也特定轴(X
或 Y
轴)加限制。这额外的线用来设定数据的对象价,帮助用户还易了解是否达标限。

比方在图片中在界限,可以互补加以下代码到 setData()函数中。

let ll = ChartLimitLine(limit: 10.0, label: "Target")
barChartView.rightAxis.addLimitLine(ll)

运行该利用,你可观看同一漫漫红线,标记在单位10左右。上面的代码中,我们当无尽上加加了一个签。但是
ChartLimitLine
有任何一个从未有过添加标签的初始化函数,如果未思加的口舌可以概括。

财经 20

安在Swift语言下用iOS Charts API制作可以图表

饼状图(有选取)

财经 21

什么样以Swift语言下用iOS Charts API制作好图表

触控事件

若是运行应用,你会发觉经过默认的捏拉缩放和双击来展开缩放。此外,如果有柱形久被单击,该柱形条会突出展示。很硬的凡管需自己再也编代码就能够采用该意义,除非您想补偿加更多之成效,比如当用户单击柱形条时有任何响应。

为检测图表内之选料,我们以使用 ChartViewDelegate 协议。

改该类的宣示如下。

class BarChartViewController: UIViewController, ChartViewDelegate {

每当调用 super.viewDidLoad()后面长下列代码到 viewDidLoad()。

barChartView.delegate = self

丰富下面的函数到此类。

func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) {
    println("\(entry.value) in \(months[entry.xIndex])")
}

当图表视图中之值为入选时,会调用上述函数。这里我们打印出被入选的月和价值。

线形图(图例、简单的规划)

财经 22

怎样在Swift语言下用iOS Charts API制作精良图表

保留图表

你得以图片的当前状态保存也图像。可以选以其保存至相机胶卷或者又安一个保留路径。

首先,我们用增长一个保留按钮到图片视图。打开故事板文件,并找到柱形图表视图控制器。拖动导航项目及视图控制器的导航栏,然后拖动柱形按钮项,并拿该放于导航项目的下手上角。删除属性检查器中的领航项目的题属性被之「标题」文本。选择柱形按钮项,并设置其标识方便保存及性检查器。可以见见如下界面。

财经 23

什么以Swift语言下用iOS Charts API制作好图表

继之为按钮创建一个音应,命名吧 saveChart,添加以下代码到
BarChartViewController 类中。

@IBAction func saveChart(sender: UIBarButtonItem) {

}

按部就班下列代码修改点的点子。

@IBAction func saveChart(sender: UIBarButtonItem) {
    barChartView.saveToCameraRoll()
}

实行该次后,当点击保存按钮时,图表图像讲保存及相册,可用 Photos
应用浏览。

下列代码可以还安保存路径。

barChartView.saveToPath(path: String, format: ChartViewBase.ImageFormat, compressionQuality: Double)

图片格式可能是 .JPEG或 .PNG,该 compressionQuality
是同栽无损格式(JPEG)的减少质量。

水平柱形图

财经 24

怎么样以Swift语言下用iOS Charts API制作精美图表

柱形图(分组数据集)

财经 25

何以在Swift语言下用iOS Charts API制作精良图表

【编者按】本文作者 Joyce Echessa
是渥合数位服务创办人,毕业被台湾大学,近年来专注于援客户拓展 App
软体以及网站开。文中作者通过演示介绍用 ios-charts
库创建简易美观的图样,有助于开发者在运用被活跃形象地向用户展示数据。本文系
OneAPM
工程师编译整理:

哪些当Swift语言下用iOS Charts API制作地道图表

柱形图(图例、简单设计)

财经 26

怎么样以Swift语言下用iOS Charts API制作精美图表

线形图(图例、简单的统筹)

财经 27

何以在Swift语言下用iOS Charts API制作精良图表

动画

卿得为图设定有动画,使的更加活泼活泼。你得应用三栽要的动画类型方法,可以以为
XY 轴或者个别有轴产生动画。

  • animate(xAxisDuration: NSTimeInterval, yAxisDuration:
    NSTimeInterval)
  • animate(xAxisDuration: NSTimeInterval)
  • animate(yAxisDuration: NSTimeInterval)

卿可以参加任意的 ChartEasingOption 到上述函数。选项如下:

  • Linear
  • EaseInQuad
  • EaseOutQuad
  • EaseInOutQuad
  • EaseInCubic
  • EaseOutCubic
  • EaseInOutCubic
  • EaseInQuart
  • EaseOutQuart
  • EaseInOutQuart
  • EaseInQuint
  • EaseOutQuint
  • EaseInOutQuint
  • EaseInSine
  • EaseOutSine
  • EaseInOutSine
  • EaseInExpo
  • EaseOutExpo
  • EaseInOutExpo
  • EaseInCirc
  • EaseOutCirc
  • EaseInOutCirc
  • EaseInElastic
  • EaseOutElastic
  • EaseInOutElastic
  • EaseInBack
  • EaseOutBack
  • EaseInOutBack
  • EaseInBounce
  • EaseOutBounce
  • EaseInOutBounce

加上下行内容到 setChart()函数。

运转应用,柱形图为卡通的款型进入视图。我们同时也片个轴都安装2秒的动画片。

财经 28

如何以Swift语言下iOS Charts API制作好图表

改上述状态呢:

barChartView.animate(xAxisDuration: 2.0, yAxisDuration: 2.0, easingOption: .EaseInBounce)

而见面盼这行的特效如下。

财经 29

哪些以Swift语言下iOS Charts API制作地道图表

, ,


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图