为 macOS、iOS 和 tvOS 提供Sparklines
一个轻量级的 sparkline 组件,支持 Swift、SwiftUI、macCatalyst 和 Objective-C。

什么是 Sparkline?
Sparkline 是一个非常小的图表,通常绘制时没有坐标轴或坐标。它以一种简单而高度浓缩的方式呈现某些测量(如温度或股市价格)的变化(通常随时间变化)的一般形状。Sparklines 足够小,可以嵌入到文本中,或者将多个 Sparklines 组合成小多倍显示的元素。而典型的图表旨在展示尽可能多的数据,并从文本流中独立出来,Sparklines 则旨在简洁、易于记忆,并且置于讨论的相应位置。
什么是 Sparkline 不是的?
DSFSparkline
不是 一个功能齐全的图表库。它被构建为轻量级的,以便在应用程序内创建小型、易于记忆的图表。
如果您需要标签、实时更新、坐标轴标签、交互性、图例或更大尺寸下精美的图表等特性,您可能需要使用Charts库、Core plot或SciChart(付费版)。您可以在这里找到更多相关内容。
特性
- 支持多种图表样式,如线条、柱状图、条形图等。
- 支持对Sparkline的定制,如零线、网格线、高亮显示。
- 提供预建的NSView/UIView/SwiftUI类型,以便快速集成。
- Sparkline在任何尺寸下都可以独立缩放。
- y范围可以自动增大或减小,以包含所有y数据范围。
- y范围可以固定,Sparkline将截断到指定范围。
- 支持所有Sparkline类型的SwiftUI。
- 支持NSAttributedString。
IBDesignable
支持预建类型,因此您可以在接口构建器中查看和配置Sparkline。- 可选在柱状图和线条图中绘制“零线”(感谢Tito Ciuro)
- 支持Playground。
TL;DR - Show me something!
创建一个视网膜分辨率的(144dpi)位图,上面覆盖着简单线条图表
// A datasource with a simple set of data
let source = DSFSparkline.DataSource(values: [4, 1, 8, 7, 5, 9, 3], range: 0 ... 10)
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let stack = DSFSparklineOverlay.Line() // Create a line overlay
stack.dataSource = source // Assign the datasource to the overlay
bitmap.addOverlay(stack) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 25, scale: 2)
// Embed a sparkline in an NSAttributedString
let attributedString = bitmap.attributedString(size: CGSize(width: 40, height: 18), scale: 2)

创建一个带有零线和高亮显示范围的Swift-UI线条图Sparkline
fileprivate let SwiftUIDemoDataSource: DSFSparkline.DataSource = {
let d = DSFSparkline.DataSource(windowSize: 20, range: 0 ... 1, zeroLineValue: 0.5)
d.push(values: [
0.72, 0.84, 0.15, 0.16, 0.30, 0.58, 0.87, 0.44, 0.02, 0.27,
0.48, 0.16, 0.15, 0.14, 0.81, 0.53, 0.67, 0.52, 0.07, 0.50
])
return d
}()
struct SuperCoolLineSpark: View {
// The overlay representing the zero-line for the data source
var zeroOverlay: DSFSparklineOverlay = {
let zeroLine = DSFSparklineOverlay.ZeroLine()
zeroLine.dataSource = SwiftUIDemoDataSource
zeroLine.dashStyle = []
return zeroLine
}()
// The overlay to draw a highlight between range 0 ..< 0.2
var rangeOverlay: DSFSparklineOverlay = {
let highlight = DSFSparklineOverlay.RangeHighlight()
highlight.dataSource = SwiftUIDemoDataSource
highlight.highlightRange = 0.0 ..< 0.2
highlight.fill = DSFSparkline.Fill.Color(DSFColor.gray.withAlphaComponent(0.4).cgColor)
return highlight
}()
// The actual line graph
var lineOverlay: DSFSparklineOverlay = {
let lineOverlay = DSFSparklineOverlay.Line()
lineOverlay.dataSource = SwiftUIDemoDataSource
lineOverlay.primaryStrokeColor = DSFColor.systemBlue.cgColor
lineOverlay.primaryFill = DSFSparkline.Fill.Color(DSFColor.systemBlue.withAlphaComponent(0.3).cgColor)
lineOverlay.secondaryStrokeColor = DSFColor.systemYellow.cgColor
lineOverlay.secondaryFill = DSFSparkline.Fill.Color(DSFColor.systemYellow.withAlphaComponent(0.3).cgColor)
lineOverlay.strokeWidth = 1
lineOverlay.markerSize = 4
lineOverlay.centeredAtZeroLine = true
return lineOverlay
}()
var body: some View {
DSFSparklineSurface.SwiftUI([
rangeOverlay, // range highlight overlay
zeroOverlay, // zero-line overlay
lineOverlay, // line graph overlay
])
.frame(width: 150, height: 40)
}
}

可用的图表类型
简单的折线sparkline。折线可围绕零线居中来表示正负值。你也可以添加(可选)数据点的标记。
你可以通过提供一个绘制回调块(markerDrawingBlock
)来自定义绘制标记,在回调块中你可以自定义哪些标记被绘制(例如,仅最小值和最大值)以及如何绘制它们。
标准 | 居中 |
---|---|
![]() |
![]() |
插值 | 插值居中 |
---|---|
![]() |
![]() |
标准标记 | 插值标记 |
---|---|
![]() |
![]() |
自定义标记(仅最小值/最大值) | 自定义标记(最后5个值) |
---|---|
![]() |
![]() |
使用自定义标记的Swift示例
//
// A custom marker drawing function that draws the maximum value in green, the minimum value in red
//
self.myLineView.markerDrawingBlock = { context, markerFrames in
// Get the frames containing the minimum and maximum values
if let minMarker = markerFrames.min(by: { (a, b) -> Bool in a.value < b.value }),
let maxMarker = markerFrames.min(by: { (a, b) -> Bool in a.value > b.value }) {
// Draw minimum marker
context.setFillColor(DSFColor.systemRed.cgColor)
context.fill(minMarker.rect)
context.setLineWidth(0.5)
context.setStrokeColor(DSFColor.white.cgColor)
context.stroke(minMarker.rect)
// Draw maximum marker
context.setFillColor(DSFColor.systemGreen.cgColor)
context.fill(maxMarker.rect)
context.setLineWidth(0.5)
context.setStrokeColor(DSFColor.white.cgColor)
context.stroke(maxMarker.rect)
}
}
简单的条形图sparkline。条形可以围绕零线居中来指示正负值。
标准 | 居中 |
---|---|
![]() |
![]() |
堆叠线sparkline类似于条形图,但不会分离单个列。堆叠线可以围绕零线居中来指示正负值。
标准 | 居中 |
---|---|
![]() |
![]() |
条纹图。条纹图的典型例子是“升温条纹”气候图。
从数据源获取的值映射到提供的渐变中
标准 | 积分(像素边界) |
---|---|
![]() |
![]() |
类似于活动查看器CPU历史图的点sparkline
标准 | 反转 |
---|---|
![]() |
![]() |
胜负图,其中数据源中的正值表示为“胜利”,负值表示为“失败”,零值表示为“平局”。
胜负 | 胜负平 |
---|---|
![]() |
![]() |
一个表格图,其中数据源中的正数用实心圆表示,负数用空心圆表示。其行为与盈亏图相同。
标准 |
---|
![]() |
一个基本的饼图 Sparkline
标准 |
---|
![]() |
数据条 Sparkline。支持百分比和总计类型。
百分比 | 总计 |
---|---|
![]() |
![]() |
百分比条 Sparkline 取一个单一值(0 ... 1)并绘制一个水平条形图,其中包含可选的文本标签。
![]() |
![]() |
一个带有单个值(0 ... 1)的简单量表。仪表中显示的颜色可以是以下之一
- 单一纯色
- 从渐变到值的彩色映射
- 从颜色桶到值的彩色映射
标准 |
---|
![]() |
类似Github风格的活动网格。每个单元格代表颜色表示的连续进程中的离散值
- 可配置的横向/纵向单元格计数
- 可配置的填充方案
![]() |
![]() |
演示
你可以在Demos/Samples
子文件夹中的项目中找到许多Sparkline示例,为macOS(Swift和ObjC)、iO、tvOS、macCatalyst和SwiftUI提供了示例。
在Demos/Playground
子文件夹中还有一个简单的Xcode Playground可用,你可以在这里尝试不同的Sparkline类型。
构建您的Sparkline
使用预构建视图
预构建视图可快速添加Sparkline,通过SwiftUI或通过Interface Builder(使用@IBDesignable提供预览)。这些视图提供的样式和自定义选项稍微有限一些,但比直接使用叠加层实现要快得多。
大部分情况下,预构建的类型将满足您的需求。
如果您在v4之前使用过DSFSparklines
,这些是您用来显示Sparklines的原视图类型。
- 数据源 - 要绘制的数值集
- 预构建视图类型 - 用于绘制Sparkline的NSView/UIView/SwiftUI视图
使用叠加层
叠加层Sparkline有三个基本构建块。叠加层Sparkline比预构建视图更灵活、可配置,但设置更复杂,且不支持@IBDesignable。
- 表面 - 它将在此处绘制
- 数据源 - 要绘制的数值集
- 一个或多个叠加层 - 绘制Sparkline不同组件的"层"
表面
表面表示Sparkline的目的地。此库提供了一些内置表面
DSFSparklineSurfaceView
- 用于显示Sparkline的NSView/UIView表面DSFSparklineSurface.SwiftUI
- SwiftUIView
表面。DSFSparklineSurface.Bitmap
- 用于从Sparkline创建位图的NSImage/UIImage/CGImage/NSAttributedString表面。
数据源
数据源为sparkline提供数据。数据源可以被多个覆盖层或预构建类型(见下文)共享,以提供数据源的“不同视角”。如果数据源更新,所有观察该数据源的sparkline覆盖层将自动重新渲染。
目前有两种类型的数据源可用
DSFSparkline.DataSource
这种数据源包含可以通过向源中推送新值来更新的值。
更多详情
窗口大小
数据源定义了一个“窗口大小”——在覆盖层上绘制的最大值数。当值被推入数据源时,任何不再在数据源窗口中“适合”的值将被丢弃。
- 如果窗口大小减少,存储数据将被截断。
- 如果窗口大小增加,数据存储将以零填充
代码示例
/// Swift
dataSource.windowSize = 30
assert(dataSource.windowSize == 30)
/// Objective-C
[dataSource setWindowSize:30];
assert([dataSource windowSize] == 30);
Y范围
范围定义了要显示在sparkline中的上下值。任何推入数据源的值在绘制到此范围时都会被限制。
如果没有设置范围(即nil),则任何覆盖图将自动调整大小以适应源中的值范围。例如,对于值[1, 2, 3, 4],范围隐式设置为一到4。如果值是[-10, 100, 33],则范围隐式设置为一到100。
代码示例
/// Swift
dataSource.range = -1.0 ... 1.0
/// Objective-C
[dataSource setRangeWithLowerBound:-1.0 upperBound:1.0];
零线的值
零线定义了sparkline覆盖图应该认为是'零'的点。例如,可以居中的图形(线、条形和堆叠线)使用零线值定义图形居中的位置。
默认情况下,零线值为零。
您可以通过向表面添加DSFSparklineOverlay.ZeroLine
来为sparkline绘制零线。
代码示例
/// Swift
dataSource.zeroLineValue = 0.2
/// Objective-C
[dataSource setZeroLineValue:0.2];
添加值
您可以使用push
函数将新的值推送到数据源。数据源中的旧值(小于数据源的windowSize
)将被丢弃。
随着值被推送到数据源,分配给此数据源的任何覆盖图将自动更新。
代码示例
/// Swift
dataSource.push(value: 4.5)
dataSource.push(values: [6, 7, 8])
/// Objective-C
[dataSource pushWithValue:@(4.5)];
set
函数将替换数据源中的所有值。该函数还将数据源的windowSize
更改为传递的值数组的长度。
分配给此数据源的任何覆盖图将自动更新。
代码示例
/// Swift
datasource.set(values: [
0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0,
0.0, -0.1, -0.2, -0.3, -0.4, -0.5, -0.6, -0.7, -0.8, -0.9, -1.0
])
/// Objective-C
[datasource setWithValues:
@[@(0.0), @(0.1), @(0.2), @(0.3), @(0.4), @(0.5), @(0.6), @(0.7), @(0.8), @(0.9), @(1),
@(0.0), @(-0.1), @(-0.2), @(-0.3), @(-0.4), @(-0.5), @(-0.6), @(-0.7), @(-0.8), @(-0.9), @(-1)]];
DSFSparkline.StaticDataSource
包含一组静态值的值源。某些类型的sparkline使用单个数据集,不提供历史背景。
更多详情
/// Swift
let dataSource = DSFSparkline.StaticDataSource([1, 2, 3])
/// Objective-C
DSFSparklineStaticDataSource* dataSource = [[DSFSparklineStaticDataSource alloc] init: @[@(1), @(2), @(3)]];
叠加
叠加表示数据点特征图的个别视觉组件。您可以根据需要添加或删除任何数量的叠加,并且可以按任何顺序添加到图表上。例如,您可以通过相同的叠加深入同一个表面的两种不同的图表类型。因为叠加可以共享数据源,所以使用相同数据源的所有叠加如果数据发生变化(例如,在响应于 push
的情况下)将自动更新。
例如,有一个叠加可以突出显示数据点的y范围。或者,如果您需要某些网格线,可以使用网格线叠加来添加。
您可以将不同实例的叠加添加到同一个数据点特征图上。例如,如果您想添加多个范围突出显示,则为数据面添加多个 '突出显示' 叠加。
叠加添加的顺序决定了在数据点特征图中的z轴上它们出现的位置。例如,您可以通过先添加图表叠加,然后再添加网格线叠加来选择将网格线绘制在图表之上。
叠加使您的数据点特征图可以像您希望的那样复杂或简单。
图类型
动态
动态图表在其数据源中'推进'值时自动更新其叠加。随着数据的添加,分配的叠加将自动更新以反映新的数据。如果通过推进或设置添加更多数据,则将数据添加到数据源,相关视图将自动更新以反映新的数据。不再属于数据源窗口的旧数据将被丢弃。
这提供了在图表的宽度上显示历史数据集的能力。
`DSFSparklineOverlay.Line` 

let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let line = DSFSparklineOverlay.Line() // Create a line overlay
line.strokeWidth = 1
line.primaryFill = primaryFill
line.dataSource = source // Assign the datasource to the overlay
bitmap.addOverlay(line) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 25, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.StackLine` 
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let stack = DSFSparklineOverlay.Stackline() // Create a stackline overlay
stack.dataSource = source // Assign the datasource to the overlay
stack.strokeWidth = 1
stack.primaryFill = primaryFill
bitmap.addOverlay(stack) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 25, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.Bar` 
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let bar = DSFSparklineOverlay.Bar() // Create a bar overlay
bar.dataSource = source // Assign the datasource to the overlay
bar.primaryFill = primaryFill
bitmap.addOverlay(bar) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 25, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.Dot` 
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let dot = DSFSparklineOverlay.Dot() // Create a dot graph overlay
dot = biggersource // Assign the datasource to the overlay
bitmap.addOverlay(dot) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 32, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.WinLossTie` 
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let winLossTie = DSFSparklineOverlay.WinLossTie() // Create a win-loss-tie overlay
winLossTie.dataSource = winloss // Assign the datasource
bitmap.addOverlay(winLossTie) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 75, height: 12, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.Tablet` 
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let stack = DSFSparklineOverlay.Tablet() // Create a tablet overlay
stack.dataSource = winloss // Assign a datasource to the overlay
bitmap.addOverlay(stack) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 90, height: 16, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.Stripes` 
let bitmap = DSFSparklineSurface.Bitmap() // Create a bitmap surface
let stack = DSFSparklineOverlay.Stripes() // Create a stripes overlay
stack.dataSource = .init(values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
bitmap.addOverlay(stack) // And add the overlay to the surface.
// Generate an image with retina scale
let image = bitmap.image(width: 90, height: 16, scale: 2)
// Do something with 'image'
静态
静态图形包含一组固定的值(例如饼图)。当将其新静态数据源分配给它时,覆盖内容会更新。
`DSFSparklineOverlay.Pie` /art/projects/DSFSparkline/types-new/pie-simple.png)
let bitmap = DSFSparklineSurface.Bitmap()
let pie = DSFSparklineOverlay.Pie()
pie.dataSource = DSFSparkline.StaticDataSource([10, 55, 20])
pie.lineWidth = 0.5
pie.strokeColor = CGColor.black
bitmap.addOverlay(pie)
// Generate an image with retina scale
let image = bitmap.image(width: 18, height: 18, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.DataBar` /art/projects/DSFSparkline/types-new/databar-simple.png)
let bitmap = DSFSparklineSurface.Bitmap()
let stack = DSFSparklineOverlay.DataBar()
stack.dataSource = DSFSparkline.StaticDataSource([10, 20, 30])
stack.lineWidth = 0.5
stack.strokeColor = CGColor.black
bitmap.addOverlay(stack)
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 18, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.PercentBar`
/art/projects/DSFSparkline/types-new/percentbar2.png)
let bitmap = DSFSparklineSurface.Bitmap()
let percentBar = DSFSparklineOverlay.PercentBar(value: 0.3)
bitmap.addOverlay(percentBar)
// Generate an image with retina scale
let image = bitmap.image(width: 50, height: 18, scale: 2)!
// Do something with 'image'
`DSFSparklineOverlay.WiperGauge` /art/projects/DSFSparkline/types-new/wiper-gauge-simple.png)
let bitmap = DSFSparklineSurface.Bitmap()
let wiperGauge = DSFSparklineOverlay.WiperGauge()
wiperGauge.value = 0.75
bitmap.addOverlay(wiperGauge)
// Generate an image of the wiper gauge with retina scale
let image = bitmap.image(width: 50, height: 25, scale: 2)
// Do something with 'image'
`DSFSparklineOverlay.ActivityGrid` 
let bitmap = DSFSparklineSurface.Bitmap()
let activityGrid = DSFSparklineOverlay.ActivityGrid()
activityGrid.dataSource = DSFSparkline.StaticDataSource(values: [...])
activityGrid.verticalCellCount = 1
bitmap.addOverlay(activityGrid)
// Generate an image of the wiper gauge with retina scale
let image = bitmap.image(width: 200, height: 14, scale: 2)
// Do something with 'image'
组件类型
组件表示一种非自身的覆盖层。例如:网格线、零线、高亮等。组件使用相同的数据源,以便与它关联的图形对齐。
名称 | 描述 |
---|---|
DSFSparklineOverlay.ZeroLine |
在Sparkline的“零线”位置绘制一条水平线。零线由数据源定义,默认为零,但可以进行更改。 |
DSFSparklineOverlay.RangeHighlight |
高亮Sparkline上的y值范围 |
DSFSparklineOverlay.GridLines |
在Sparkline上指定y值的位置绘制线条 |
使用预构建视图
DSFSparkline提供了一些预构建的Sparkline视图,范围更有限,设计用于加快项目开发,特别是与Interface Builder相关(预构建类型提供@IBDesignable
接口),您可以在Interface Builder中直接设计图表的外观。
每个预构建的Sparkline视图都有一个SwiftUI伴随视图。
可用的预构建类型
DSFSparklineLineGraphView
/DSFSparklineLineGraphView.SwiftUI
DSFSparklineStackLineGraphView
/DSFSparklineLineGraphView.SwiftUI
DSFSparklineBarGraphView
/DSFSparklineBarGraphView.SwiftUI
DSFSparklineStripesGraphView
/DSFSparklineStripesGraphView.SwiftUI
DSFSparklineDotGraphView
/DSFSparklineDotGraphView.SwiftUI
DSFSparklineWinLossGraphView
/DSFSparklineWinLossGraphView.SwiftUI
DSFSparklineTabletGraphView
/DSFSparklineTabletGraphView.SwiftUI
DSFSparklinePieGraphView
/DSFSparklinePieGraphView.SwiftUI
DSFSparklineDataBarGraphView
/DSFSparklineDataBarGraphView.SwiftUI
DSFSparklinePercentBarGraphView
/DSFSparklinePercentBarGraphView.SwiftUI
DSFSparklineWiperGaugeGraphView
/DSFSparklineWiperGaugeGraphView.SwiftUI
DSFSparklineActivityGridView
/DSFSparklineActivityGridView.SwiftUI
示例 Swift 代码
// Create the view
let sparklineView = DSFSparklineLineGraphView(…)
sparklineView.graphColor = UIColor.blue
sparklineView.showZeroLine = true
// Create the datasource and assign to the view
let sparklineDataSource = DSFSparklineDataSource(windowSize: 30, range: -1.0 ... 1.0)
sparklineView.dataSource = sparklineDataSource
…
// Add a single new data element to the sparkline
sparklineDataSource.push(value: 0.7) // view automatically updates with new data
// Add a set of data to the sparkline
sparklineDataSource.push(values: [0.3, -0.2, 1.0]) // view automatically updates with new data
// Completely replace the sparkline data with a new set of data
sparklineDataSource.set(values: [0.2, -0.2, 0.0, 0.9, 0.8]) // view automatically resets to new data
示例 SwiftUI 代码
struct SparklineView: View {
let leftDataSource: DSFSparkline.DataSource
let rightDataSource: DSFSparkline.DataSource
let BigCyanZeroLine = DSFSparkline.ZeroLineDefinition(
color: .cyan,
lineWidth: 3,
lineDashStyle: [4,1,2,1]
)
var body: some View {
HStack {
DSFSparklineLineGraphView.SwiftUI(
dataSource: leftDataSource,
graphColor: DSFColor.red,
interpolated: true)
DSFSparklineBarGraphView.SwiftUI(
dataSource: rightDataSource,
graphColor: DSFColor.blue,
lineWidth: 2,
showZeroLine: true,
zeroLineDefinition: BigCyanZeroLine)
}
}
}
预置自定义
视图类型和设置
表示可查看的设置和显示。当前可用的视图类型有:
常见显示自定义
设置 | 类型 | 描述 |
---|---|---|
graphColor |
NSColor UIColor |
用于绘制启发线的颜色 |
可以显示零线的图表的常见元素(线/条形图/堆叠线)
设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
showZeroLine |
Bool |
在y轴零线点上绘制一个虚线线 |
zeroLineColor |
NSColor UIColor |
y轴上“零线”的颜色。 |
zeroLineWidth |
CGFloat |
y轴上“零线”的宽度 |
zeroLineDashStyle |
[CGFloat] |
绘制零线时使用的虚线模式 |
可以围绕零线居中的图表的常见元素(线/条形图/堆叠线)
设置 | 类型 | 描述 |
---|---|---|
centeredAtZeroLine |
Bool |
图表是否应在零线上居中? |
lowerGraphColor |
NSColor UIColor |
用于绘制零线下值的颜色。如果为nil,则与图表颜色相同 |
DSFSparklineLineGraphView
)
线图自定义(设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
lineWidth |
CGFloat |
线的宽度 |
interpolation |
Bool |
在点之间插值曲线 |
lineShading |
Bool |
在线下方进行阴影处理 |
shadowed |
Bool |
在下方绘制线的阴影 |
markerSize |
CGFloat |
(可选)使用线在该点颜色绘制大小指定的标记 |
markerSize |
CGFloat |
(可选)使用线在该点颜色绘制大小指定的标记 |
markerDrawingBlock |
一个回调块,允许自定义绘制标记(如果 markerSize 大于 1) |
DSFSparklineBarGraphView
)
柱状图自定义(设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
lineWidth |
CGFloat |
线的宽度 |
barSpacing |
CGFloat |
每个条形之间的间距 |
DSFSparklineStripesGraphView
)
条纹图自定义(设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
integral |
Bool |
如果为 true,则在像素边界上绘制条形以获得干净整齐的线条 |
gradient |
DSFGradient |
用于将数据源值映射到颜色时的颜色渐变 |
DSFSparklineDotGraphView
)
点图自定义(设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
upsideDown |
Bool |
如果为 true,从图顶部向下绘制 |
unsetGraphColor |
NSColor UIColor |
绘制背景时使用的颜色 |
胜/负图自定义(《DSFSparklineWinLossGraphView》)
设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
lineWidth |
CGFloat |
划线线条的宽度 |
barSpacing |
CGFloat |
每个条形之间的间距 |
winColor |
NSColor UIColor |
用于'胜利'的颜色 |
lossColor |
NSColor UIColor |
用于'失败'的颜色 |
tieColor |
NSColor UIColor |
(可选) 用于'平局'的颜色。如果为nil,则不绘制平局(0)值 默认情况下,不绘制'平局'值。 |
平板图自定义(《DSFSparklineTabletGraphView》)
设置 | 类型 | 描述 |
---|---|---|
dataSource |
DSFDataSource |
图表数据源 |
lineWidth |
CGFloat |
划线线条的宽度 |
barSpacing |
CGFloat |
每个条形之间的间距 |
winColor |
NSColor UIColor |
用于绘制'胜利'填充圆的颜色 |
lossColor |
NSColor UIColor |
用于绘制'失败'填充圆的颜色 |
饼图自定义(《DSFSparklinePieGraphView》)
设置 | 类型 | 描述 |
---|---|---|
dataSource |
[CGFloat] |
饼图中显示的数据 |
palette |
DSFSparklinePalette |
用于绘制图表的调色板 |
strokeColor |
NSColor UIColor |
(可选) 在每个段之间绘制线条的颜色。如果nil,则不绘制线条 |
lineWidth |
CGFloat |
绘制线条的宽度 |
animated |
Bool |
如果为true,当数据源设置时,段将动画进入视图 |
animationDuration |
CGFloat |
动画的持续时间 |
数据条图自定义(《DSFSparklineDataBarGraphView》)
设置 | 类型 | 描述 |
---|---|---|
dataSource |
[CGFloat] |
饼图中显示的数据 |
maximumTotalValue |
CGFloat |
若 <= 0,数据表示总值的百分比,若 > 0,表示数据条右侧的值 |
palette |
DSFSparklinePalette |
用于绘图的调色板。 |
strokeColor |
NSColor UIColor |
(可选) 在每个段之间绘制线条的颜色。如果nil,则不绘制线条 |
lineWidth |
CGFloat |
绘制线条的宽度 |
unsetColor |
NSColor UIColor |
(可选)如果设置了最大值,如果段不满足总值,则使用此颜色作为背景色 |
animated |
Bool |
如果为true,当数据源设置时,段将动画进入视图 |
animationDuration |
CGFloat |
动画的持续时间 |
百分比条形图自定义(《DSFSparklinePercentBarGraphView》)
设置 | 类型 | 描述 |
---|---|---|
value |
CGFloat |
用于饼图的显示值 |
displayStyle |
样式 |
绘制图形时要应用的样式 |
cornerRadius |
CGFloat |
条形的圆角 |
showLabel |
Bool |
我们应该在百分比条形上绘制文本标签吗? |
underBarColor |
NSColor UIColor |
百分比条形图条形背景颜色 |
underBarTextColor |
NSColor UIColor |
背景上显示的文本颜色 |
barColor |
NSColor UIColor |
百分比条形图的条形颜色 |
barTextColor |
NSColor UIColor |
条形上显示的文本颜色 |
fontName |
字符串 |
标签字体名称 |
fontSize |
CGFloat |
标签字体大小 |
shouldAnimate |
Bool |
如果为true,当数据源设置时,段将动画进入视图 |
animationDuration |
CGFloat |
动画的持续时间 |
leftInset . |
CGFloat |
条形相对于控件左侧的距离 |
topInset |
CGFloat |
条形相对于控件顶部的距离 |
rightInset |
CGFloat |
条形相对于控件右侧的距离 |
bottomInset |
CGFloat |
条形相对于控件底部的距离 |
集成
每个支持的平台在《Demos》子文件夹中有可用的示例。示例使用CocoaPods,因此您需要在《Demos》文件夹中执行《pod install》。
将库导入到您的源文件中
Cocoapods
pod 'DSFSparkline', :git => 'https://github.com/dagronf/DSFSparkline/'
Swift包管理器
将https://github.com/dagronf/DSFSparkline
添加到您的项目中。
屏幕截图
应用内
macOS暗模式 | macOS亮模式 | iOS |
---|---|---|
![]() |
![]() |
![]() |
界面构建器
macOS | tvOS |
---|---|
![]() |
![]() |
SwiftUI
NSMutableAttributedString 支持
动画
变更
5.2.0
- 为预制视图添加了网格线支持(线、条、堆叠)(NSView/UIView/SwiftUI)
5.1.0
- 添加了活动网格
5.0.0
- 修复了在插值线图中偶尔出现的裁剪问题。
4.6.0
- 添加了 WiperGauge sparkline 类型
4.3.0
- 为“line”折线图类型添加了自定义绘制标记的功能 (提出问题)
- 修复了一个小问题,其中某些图表类型嵌入到内部以去除裁剪(带有标记的线、条形图)会导致零线、突出显示覆盖和网格看起来略有不准确。
4.2.0
- 添加了“百分比条形图”折线图类型。
4.1.2
4.1.1
- 修复了渐变桶计数问题。
- 在ReportView示例中添加了AttributedString SwiftUI示例。示例使用The SwiftUI Lab Attributed String,并进行AppKit宽计算修复。
4.1.0
- 将sparklines嵌入到AttributedString中。
4.0.0
将绘图代码(以前直接在视图中使用)大量重构为覆盖和更为灵活的表面(例如,能够绘制sparkline位图而无需创建视图)
以前的视图/swiftui类型仍然可用 - 这些类型使用新的覆盖方案重建,并在文档中作为“预构建”类型进行引用。这允许与库的早期版本保持向后兼容。请注意,由于预构建视图被重新编写,可能会有轻微的视觉差异。
3.7.0
- 添加了条纹图形。
3.6.1
- 修复了iOS/tvOS上的动画问题。
3.6.0
- 添加了饼图、数据条图。
- 为折线图添加了显示数据标记的能力。
3.5.2
- 修复了Objective-C演示应用。
- 在基本sparkline视图类中添加了
snapshot
方法,以生成sparkline的NSImage/UIImage版本,用于在文本等中的嵌入式sparklines。
3.5.1
- 修复了podspec中的版本问题。
3.5.0
- 添加了stackline折线图类型。
- 添加了胜负平折线图类型。
- 添加了平板电脑折线图类型。
3.4.0
- 添加了能够围绕零线值中心化线图和条形图的功能。
3.3.0
- 修复了某些情况下iOS背景绘制不正确的问题。
- 修复了在一个线图形少于2个点时崩溃的罕见问题。
3.2.0
- 为了清晰起见,将零线定义类更改为
DSFSparklineZeroLineDefinition
。 - 增加了更多文档,特别是关于SwiftUI的。尝试使绘制参数的文档更加清晰。
3.1.0
- 添加了自定义零线显示的能力(《Tito Ciuro》提供)
- 将
showZero
更改为showZeroLine
,以与新的零线显示值保持一致性
3.0.0
- 添加了设置‘零’线值的能力。默认为零以保持向后兼容。
您可以通过数据源上的zeroLineValue
设置在哪里绘制‘零’线。
2.0.0
-
主要视图已重命名并添加了
View
后缀。因此DSFSparklineLineGraph
->DSFSparklineLineGraphView
DSFSparklineBarGraph
->DSFSparklineBarGraphView
DSFSparklineDotGraph
->DSFSparklineDotGraphView
-
将
SLColor
和SLView
重命名为DSFColor
和DSFView
,以保持模块命名的规范性。 -
我从核心
DSFSparklineDataSourceView
中移除了windowSize
。`windowSize`与数据有关,永远不应该成为UI定义的一部分。我提供了一个仅用于`IBDesignable`支持的替换名称为`graphWindowSize`,仅从Interface Builder中调用。如果您要设置从您的xib文件设置的`windowSize`,请设置`graphWindowSize`的inspections属性。如果您在日志中看到类似以下警告:
2020-12-07 18:22:51.619867+1100 iOS Sparkline Demo[75174:1459637] Failed to set (windowSize) user defined inspected property on (DSFSparkline.DSFSparklineBarGraphView): [<DSFSparkline.DSFSparklineBarGraphView 0x7fe2eb10f2b0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key windowSize.
,这意味着您的.xib文件中设置了`windowSize`值。请删除它,并设置`graphWindowSize`值。 -
对于条形图类型,现在的
lineWidth
和barSpacing
分别代表条之间和线条的像素间距。如果你以前为这些属性设置了分数值(例如,lineWidth = 0.5),你可能会发现现在的行间距和条间距不正确。这种变化的原因是帮助在像素边界上绘制线条并避免抗锯齿。 -
解决底部为零的线条颠倒问题
许可证
MIT许可证。你可以用于任何你想要的内容,只需署名我的作品。如果你用它做了某些事情,请通知我,我很乐意听听。
MIT License
Copyright (c) 2023 Darren Ford
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.