文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

可滚动的图标视图

关于

Example Application Usage

iOS的自适应可滚动图表视图,用于可视化简单的离散数据集。  是用Swift语言写的。 最初是为个人小项目开发的。

Init Animation

内容

特征

动画!

Animating

手动/自动/自适应测距!

Adapting

滚动!

Scrolling

更多滚动!

More_Scrolling

定制!

More_Scrolling

用法

将ScrollableGraphView添加到您的项目:

ScrollableGraphView 类添加到您的项目。  共有两种方法可以将ScrollableGraphView添加到您的项目中。

手动

在Xcode中将 ScrollableGraphView.swift 添加到您的项目

第 1 段(可获 2 积分)

CocoaPods

添加pod 'ScrollableGraphView'到您的Podfile文件中,然后确保将ScrollableGraphView导入到代码中 。

创建图形和设置数参数。

  1. 创建一个ScrollableGraphView实例并设置数据和标签。

    let graphView = ScrollableGraphView(frame: someFrame)
    let data = [4, 8, 15, 16, 23, 42]
    let labels = ["one", "two", "three", "four", "five", "six"]
    graphView.setData(data, withLabels: labels)
  2. 将ScrollableGraphView添加到视图层。

    someViewController.view.addSubview(graphView)

你可以用它来做的事情:

  • ✔ 用来进行应用程序时间显示的研究/等
  • ✔ 天气应用
  • ✔ 原型设计
  • 简单的数据可视化

你不可以/不能使用它来完成的事情:

  • ✘用于严格的统计软件
  • ✘ 重要且复杂的数据可视化
  • ✘ 绘制连续数学函数的图形
第 2 段(可获 2 积分)

图库/主题

注意:这里的示例为用户界面颜色使用了“colorFromHex”扩展。

默认

dark

let graphView = ScrollableGraphView(frame: frame)
graphView.setData(data, withLabels: labels)
self.view.addSubview(graphView)

流畅的黑色

dark

let graphView = ScrollableGraphView(frame: frame)

graphView.backgroundFillColor = UIColor.colorFromHex("#333333")

graphView.rangeMax = 50

graphView.lineWidth = 1
graphView.lineColor = UIColor.colorFromHex("#777777")
graphView.lineStyle = ScrollableGraphViewLineStyle.Smooth

graphView.shouldFill = true
graphView.fillType = ScrollableGraphViewFillType.Gradient
graphView.fillColor = UIColor.colorFromHex("#555555")
graphView.fillGradientType = ScrollableGraphViewGradientType.Linear
graphView.fillGradientStartColor = UIColor.colorFromHex("#555555")
graphView.fillGradientEndColor = UIColor.colorFromHex("#444444")

graphView.dataPointSpacing = 80
graphView.dataPointSize = 2
graphView.dataPointFillColor = UIColor.whiteColor()

graphView.referenceLineLabelFont = UIFont.boldSystemFontOfSize(8)
graphView.referenceLineColor = UIColor.whiteColor().colorWithAlphaComponent(0.2)
graphView.referenceLineLabelColor = UIColor.whiteColor()
graphView.dataPointLabelColor = UIColor.whiteColor().colorWithAlphaComponent(0.5)

graphView.setData(data, withLabels: labels)
self.view.addSubview(graphView)
第 3 段(可获 2 积分)

黑色条形 (感谢 @RedBlueThing  对条形层的贡献)

bar

let graphView = ScrollableGraphView(frame:frame)  

// Disable the lines and data points.
graphView.shouldDrawDataPoint = false
graphView.lineColor = UIColor.clearColor()

// Tell the graph it should draw the bar layer instead.
graphView.shouldDrawBarLayer = true

// Customise the bar.
graphView.barWidth = 25
graphView.barLineWidth = 1
graphView.barLineColor = UIColor.colorFromHex("#777777")
graphView.barColor = UIColor.colorFromHex("#555555")
graphView.backgroundFillColor = UIColor.colorFromHex("#333333")

graphView.referenceLineLabelFont = UIFont.boldSystemFontOfSize(8)
graphView.referenceLineColor = UIColor.whiteColor().colorWithAlphaComponent(0.2)
graphView.referenceLineLabelColor = UIColor.whiteColor()
graphView.numberOfIntermediateReferenceLines = 5
graphView.dataPointLabelColor = UIColor.whiteColor().colorWithAlphaComponent(0.5)

graphView.shouldAnimateOnStartup = true
graphView.shouldAdaptRange = true
graphView.adaptAnimationType = ScrollableGraphViewAnimationType.Elastic
graphView.animationDuration = 1.5
graphView.rangeMax = 50
graphView.shouldRangeAlwaysStartAtZero = true
第 4 段(可获 2 积分)

点距

dot

let graphView = ScrollableGraphView(frame:frame)
graphView.backgroundFillColor = UIColor.colorFromHex("#00BFFF")
graphView.lineColor = UIColor.clearColor()

graphView.dataPointSize = 5
graphView.dataPointSpacing = 80
graphView.dataPointLabelFont = UIFont.boldSystemFontOfSize(10)
graphView.dataPointLabelColor = UIColor.whiteColor()
graphView.dataPointFillColor = UIColor.whiteColor()

graphView.referenceLineLabelFont = UIFont.boldSystemFontOfSize(10)
graphView.referenceLineColor = UIColor.whiteColor().colorWithAlphaComponent(0.5)
graphView.referenceLineLabelColor = UIColor.whiteColor()
graphView.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.Both

graphView.numberOfIntermediateReferenceLines = 9

graphView.rangeMax = 50

self.view.addSubview(graphView)
第 5 段(可获 2 积分)

粉色的山脉形状

pink

let graphView = ScrollableGraphView(frame:frame)
graphView.backgroundFillColor = UIColor.colorFromHex("#222222")
graphView.lineColor = UIColor.clearColor()

graphView.shouldFill = true
graphView.fillColor = UIColor.colorFromHex("#FF0080")

graphView.shouldDrawDataPoint = false
graphView.dataPointSpacing = 80
graphView.dataPointLabelFont = UIFont.boldSystemFontOfSize(10)
graphView.dataPointLabelColor = UIColor.whiteColor()

graphView.referenceLineThickness = 1
graphView.referenceLineLabelFont = UIFont.boldSystemFontOfSize(10)
graphView.referenceLineColor = UIColor.whiteColor().colorWithAlphaComponent(0.5)
graphView.referenceLineLabelColor = UIColor.whiteColor()
graphView.referenceLinePosition = ScrollableGraphViewReferenceLinePosition.Both

graphView.numberOfIntermediateReferenceLines = 1

graphView.rangeMax = 50

self.view.addSubview(graphView)
第 6 段(可获 2 积分)

固体粉红色边缘

您可以使用顶部和底部的边距为其他内容留下空间:

pink_margins

let graphView = ScrollableGraphView(frame:frame)

graphView.bottomMargin = 350
graphView.topMargin = 20

graphView.backgroundFillColor = UIColor.colorFromHex("#222222")
graphView.lineColor = UIColor.clearColor()
graphView.lineStyle = ScrollableGraphViewLineStyle.Smooth

graphView.shouldFill = true
graphView.fillColor = UIColor.colorFromHex("#FF0080")

graphView.shouldDrawDataPoint = false
graphView.dataPointSpacing = 80
graphView.dataPointLabelFont = UIFont.boldSystemFontOfSize(10)
graphView.dataPointLabelColor = UIColor.whiteColor()

graphView.referenceLineThickness = 1
graphView.referenceLineLabelFont = UIFont.boldSystemFontOfSize(10)
graphView.referenceLineColor = UIColor.whiteColor().colorWithAlphaComponent(0.25)
graphView.referenceLineLabelColor = UIColor.whiteColor()

graphView.numberOfIntermediateReferenceLines = 0

graphView.rangeMax = 50

self.view.addSubview(graphView)
第 7 段(可获 2 积分)

定制

在显示ScrollableGraphView之前,可以通过设置以下任意的公共属性来自定义图形。 默认值如下所示。

线条样式

var lineWidth: CGFloat = 2

指定线条的图形适当的粗细度。

var lineColor = UIColor.blackColor()

曲线的颜色,用户界面颜色.

var lineStyle = ScrollableGraphViewLineStyle.Straight

是否应该使用贝塞尔曲线来渲染成直线。

可能用到的参数:

  • ScrollableGraphViewLineStyle.Straight
  • ScrollableGraphViewLineStyle.Smooth
var lineJoin = kCALineJoinRound
第 8 段(可获 2 积分)

曲线中的每个段应如何连接。   使用任意的核心动画连接值。

var lineCap = kCALineCapRound

线帽. 使用任意Core Animation LineCap值。

填充风格

var backgroundFillColor = UIColor.whiteColor()

整个图形视图的背景颜色,而不仅仅是绘制的图形的颜色。

var shouldFill = false

指定绘制的图形是否应使用颜色或渐变填充。

var fillType = ScrollableGraphViewFillType.Solid

指定是否使用纯色或渐变填充图形。

可能的值:

第 9 段(可获 2 积分)
  • ScrollableGraphViewFillType.Solid
  • ScrollableGraphViewFillType.Gradient
var fillColor = UIColor.blackColor()

如果 fillType 设置为 .Solid 那么这种颜色将用于填充图形。

var fillGradientStartColor = UIColor.whiteColor()

如果 fillType 设置为.Gradient,那么这种颜色是渐变的起始颜色。

var fillGradientEndColor = UIColor.blackColor()

如果 fillType 设置为.Gradient,那么这将是渐变的结束颜色。

var fillGradientType = ScrollableGraphViewGradientType.Linear

如果 fillType 设置为.Gradient,则它定义渐变是呈现为线性渐变还是径向渐变。

第 10 段(可获 2 积分)

可能的值:

  • ScrollableGraphViewFillType.Solid
  • ScrollableGraphViewFillType.Gradient

间距

spacing

var topMargin: CGFloat = 10

“最大边距”参考线的距离是从视图框架顶端开始计算,设置合适的值。

var bottomMargin: CGFloat = 10

“最小边距”参考线的距离是从视图框架底端开始计算, 设置合适的值 。

var leftmostPointPadding: CGFloat = 50

图形上的第一个点设置的距离,是从视图的左侧开始计算到给予参数的距离。

var rightmostPointPadding: CGFloat = 50

图形上的最后一个点设置的距离,是从视图的右侧开始计算到给予参数的距离。

第 11 段(可获 2 积分)
var dataPointSpacing: CGFloat = 40

每个数据点之间应该有多少空间。

var direction = ScrollableGraphViewDirection.LeftToRight

哪一种滚动方式是用户所期待的。

可能的值:

  • ScrollableGraphViewDirection.LeftToRight
  • ScrollableGraphViewDirection.RightToLeft

图形范围

var rangeMin: Double = 0

y轴的最小值。 当shouldAutomaticallyDetectRange或shouldAdaptRange = true时,将被忽略

var rangeMax: Double = 100

y轴的最大值。 当shouldAutomaticallyDetectRange或shouldAdaptRange = true时,将被忽略

第 12 段(可获 2 积分)
var shouldAutomaticallyDetectRange = false

如果这项设置为true,那么范围将从图中的数据中自动检测。

var shouldRangeAlwaysStartAtZero = false

强制图的最小值始终为零。 请结合使用

shouldAutomaticallyDetectRange或shouldAdaptRange,如果你想强制最小值保持在0而不是检测到的最小值。

数据点绘图

var shouldDrawDataPoint = true

Whether or not to draw a symbol for each data point.

var dataPointType = ScrollableGraphViewDataPointType.Circle

The shape to draw for each data point.

第 13 段(可获 2 积分)

可能的值:

  • ScrollableGraphViewDataPointType.Circle
  • ScrollableGraphViewDataPointType.Square
  • ScrollableGraphViewDataPointType.Custom
var dataPointSize: CGFloat = 5

要为每个数据点绘制的形状的大小。

var dataPointFillColor: UIColor = UIColor.blackColor()

填充形状的颜色。

var customDataPointPath: ((centre: CGPoint) -> UIBezierPath)?

如果dataPointType 设置为.Custom,那么您可以提供一个闭包来创建任何类型的形状,而不是只是一个圆形或正方形。 闭包需要一个CGPoint,它是形状的中心,它应该会返回一个完整的UIBezierPath

第 14 段(可获 2 积分)

自适应 & 动画

var shouldAdaptRange = true

y轴的范围不论怎样都应该自适应屏幕上可见的点。 这意味着如果在任何给定时间屏幕上只有5个点可见,则y轴上的最大值将是这5个点中的最大值。 当用户沿图表滚动时,会自动更新。

Adapting

var shouldAnimateOnAdapt = true

如果shouldAdaptRange 设置为true ,那么它指定图上的点无论怎样都应该移动到它们的新位置。 默认设置为true。 如果设置为false看起来很难搞定。

第 15 段(可获 2 积分)
var animationDuration = 1

动画需要多长时间。 当y轴的范围适应屏幕上的点时,影响启动动画和动画自身的效果。

var adaptAnimationType = ScrollableGraphViewAnimationType.EaseOut

动画的风格。

可能的值:

  • ScrollableGraphViewAnimationType.EaseOut
  • ScrollableGraphViewAnimationType.Elastic
  • ScrollableGraphViewAnimationType.Custom
var customAnimationEasingFunction: ((t: Double) -> Double)?

如果adaptAnimationType设置为.Custom,那么这就是你想要应用于动画的缓动函数。

第 16 段(可获 2 积分)
var shouldAnimateOnStartup = true

图表是否应在图形首次显示时对其位置设置动画。

参考线

var shouldShowReferenceLines = true

是否显示y轴参考线和标签。

var referenceLineColor = UIColor.blackColor()

参考线的颜色。

var referenceLineThickness: CGFloat = 0.5

参考线的厚度。

var referenceLinePosition = ScrollableGraphViewReferenceLinePosition.Left

标签应显示在参考线上的位置。

可能的值:

  • ScrollableGraphViewReferenceLinePosition.Left
  • ScrollableGraphViewReferenceLinePosition.Right
  • ScrollableGraphViewReferenceLinePosition.Both
第 17 段(可获 2 积分)
var referenceLineType = ScrollableGraphViewReferenceLineType.Cover

参考线的类型。 目前只有 .Cover可用。

var numberOfIntermediateReferenceLines: Int = 3

在最小和最大参考线之间应该设置多少个参考线。 如果你总共想要4条参考线,您可以将它的值设置为2,如果中间没有参考线,可以将其设置为0。

这里可用于创建以特定的间隔参考线。 如果所需的结果是在y轴上每10个单位有一个参考线,那么你可以将rangeMax 设置为100,将rangeMin 设置为0,将numberOfIntermediateReferenceLines 设置为9。

第 18 段(可获 2 积分)
var shouldAddLabelsToIntermediateReferenceLines = true

是否在中间参考线添加标签。

var shouldAddUnitsToIntermediateReferenceLineLabels = false

在中间参考线上,是否将由referenceLineUnits 变量指定的单位添加标签。

参考线标签

var referenceLineLabelFont = UIFont.systemFontOfSize(8)

用于参考线标签的字体。

var referenceLineLabelColor = UIColor.blackColor()

参考线标签的颜色。

var shouldShowReferenceLineUnits = true
第 19 段(可获 2 积分)

是否在参考线上显示单位。

var referenceLineUnits: String?

y轴所在的单位。此字符串用于参考线上的标签。

var referenceLineNumberOfDecimalPlaces: Int = 0

应在参考线标签上显示的小数位数。

数据点标签(x轴)

var shouldShowLabels = true

是否在x轴上为每个点显示标签。

var dataPointLabelTopMargin: CGFloat = 10

离“最小”参考线多远距离呈现数据点标签。

var dataPointLabelBottomMargin: CGFloat = 0
第 20 段(可获 2 积分)

距离视图底部多远应该呈现数据点标签。

var dataPointLabelFont: UIFont? = UIFont.systemFontOfSize(10)

数据点标签的字体。

var dataPointLabelColor = UIColor.blackColor()

数据点标签的颜色

改进

非常欢迎大家提供等多需求,帮忙改进或批评任何或所有的代码。

已知的问题

如果你发现有任何错误,请在Github上创建一个问题。

其他

关注我的twitter 上面有我分享的最新动态(阅读: gifs)和我做的一些其他有趣的事情。

第 21 段(可获 2 积分)

文章评论