DSFSparkline 6.0.2

DSFSparkline 6.0.2

Darren Ford 维护。



  • Darren Ford

为 macOS、iOS 和 tvOS 提供Sparklines

一个轻量级的 sparkline 组件,支持 Swift、SwiftUI、macCatalyst 和 Objective-C。

CocoaPods Swift Package Manager

什么是 Sparkline?

Sparkline 是一个非常小的图表,通常绘制时没有坐标轴或坐标。它以一种简单而高度浓缩的方式呈现某些测量(如温度或股市价格)的变化(通常随时间变化)的一般形状。Sparklines 足够小,可以嵌入到文本中,或者将多个 Sparklines 组合成小多倍显示的元素。而典型的图表旨在展示尽可能多的数据,并从文本流中独立出来,Sparklines 则旨在简洁、易于记忆,并且置于讨论的相应位置。

来源:维基百科

什么是 Sparkline 不是的?

DSFSparkline 不是 一个功能齐全的图表库。它被构建为轻量级的,以便在应用程序内创建小型、易于记忆的图表。

如果您需要标签、实时更新、坐标轴标签、交互性、图例或更大尺寸下精美的图表等特性,您可能需要使用Charts库Core plotSciChart(付费版)。您可以在这里找到更多相关内容。

特性

  • 支持多种图表样式,如线条、柱状图、条形图等。
  • 支持对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类似于条形图,但不会分离单个列。堆叠线可以围绕零线居中来指示正负值。

标准 居中

Stripes

条纹图。条纹图的典型例子是“升温条纹”气候图

从数据源获取的值映射到提供的渐变中

标准 积分(像素边界)

类似于活动查看器CPU历史图的点sparkline

标准 反转

胜负平

胜负图,其中数据源中的正值表示为“胜利”,负值表示为“失败”,零值表示为“平局”。

胜负 胜负平

平板

一个表格图,其中数据源中的正数用实心圆表示,负数用空心圆表示。其行为与盈亏图相同。

标准

饼图

一个基本的饼图 Sparkline

标准

数据条

数据条 Sparkline。支持百分比和总计类型。

百分比 总计

百分比条

百分比条 Sparkline 取一个单一值(0 ... 1)并绘制一个水平条形图,其中包含可选的文本标签。

WiperGauge

一个带有单个值(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 - SwiftUI View表面。
  • 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`
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`
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`
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`
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

  • SLColorSLView重命名为DSFColorDSFView,以保持模块命名的规范性。

  • 我从核心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`值。

  • 对于条形图类型,现在的 lineWidthbarSpacing 分别代表条之间和线条的像素间距。如果你以前为这些属性设置了分数值(例如,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.