⚠️不再维护!如果您想成为维护者,请告诉我

SwiftCharts

Version Carthage compatible License

易于使用且高度可定制的 iOS 图表库

特性

*这些是单独的仓库,以更好地关注和可重用性。

iOS 7+

视频

文档

ScreenShot ScreenShot ScreenShot ScreenShot of Multi-chart touch tracking

ScreenShot

ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot

安装

CocoaPods

添加到你的 Podfile

use_frameworks!
pod 'SwiftCharts', '~> 0.6.5'

直接使用 master 分支

pod 'SwiftCharts', :git => 'https://github.com/i-schuetz/SwiftCharts.git'

然后

pod install

在你的代码中导入框架

import SwiftCharts

Carthage

添加到你的 Cartfile

github "i-schuetz/SwiftCharts" ~> 0.6.5

贡献

非常感谢您的贡献!要提交一个贡献

  1. Fork
  2. 将更改提交到您的 fork 中的一个分支
  3. 推送你的代码并创建一个 pull request

快速开始

多线图

let chartConfig = ChartConfigXY(
    xAxisConfig: ChartAxisConfig(from: 2, to: 14, by: 2),
    yAxisConfig: ChartAxisConfig(from: 0, to: 14, by: 2)
)

let frame = CGRect(x: 0, y: 70, width: 300, height: 500)

let chart = LineChart(
    frame: frame,
    chartConfig: chartConfig,
    xTitle: "X axis",
    yTitle: "Y axis",
    lines: [
        (chartPoints: [(2.0, 10.6), (4.2, 5.1), (7.3, 3.0), (8.1, 5.5), (14.0, 8.0)], color: UIColor.red),
        (chartPoints: [(2.0, 2.6), (4.2, 4.1), (7.3, 1.0), (8.1, 11.5), (14.0, 3.0)], color: UIColor.blue)
    ]
)

self.view.addSubview(chart.view)

条形图

let chartConfig = BarsChartConfig(
    valsAxisConfig: ChartAxisConfig(from: 0, to: 8, by: 2)
)

let frame = CGRect(x: 0, y: 70, width: 300, height: 500)
        
let chart = BarsChart(
    frame: frame,
    chartConfig: chartConfig,
    xTitle: "X axis",
    yTitle: "Y axis",
    bars: [
        ("A", 2),
        ("B", 4.5),
        ("C", 3),
        ("D", 5.4),
        ("E", 6.8),
        ("F", 0.5)
    ],
    color: UIColor.red,
    barWidth: 20
)

self.view.addSubview(chart.view)
self.chart = chart

概念

主要组件

1. 图层

图表是将图层组合在一起的结果。一切都是一个图层 - 轴、参考线、分隔线、线条、圆圈等。这个想法是拥有松散耦合的组件,可以轻松地更改和组合。例如,这是一个基本图表的结构,它显示了一条带有圆圈的线

ScreenShot

以下是一个更底层的例子,提供了对图层系统的深入了解。请注意,大多数示例都是这样编写的,以便提供最大的灵活性。

let chartPoints: [ChartPoint] = [(2, 2), (4, 4), (6, 6), (8, 8), (8, 10), (15, 15)].map{ChartPoint(x: ChartAxisValueInt($0.0), y: ChartAxisValueInt($0.1))}

let labelSettings = ChartLabelSettings(font: ExamplesDefaults.labelFont)

let generator = ChartAxisGeneratorMultiplier(2)
let labelsGenerator = ChartAxisLabelsGeneratorFunc {scalar in
    return ChartAxisLabel(text: "\(scalar)", settings: labelSettings)
}

let xGenerator = ChartAxisGeneratorMultiplier(2)

let xModel = ChartAxisModel(firstModelValue: 0, lastModelValue: 16, axisTitleLabels: [ChartAxisLabel(text: "Axis title", settings: labelSettings)], axisValuesGenerator: xGenerator, labelsGenerator: labelsGenerator)

let yModel = ChartAxisModel(firstModelValue: 0, lastModelValue: 16, axisTitleLabels: [ChartAxisLabel(text: "Axis title", settings: labelSettings.defaultVertical())], axisValuesGenerator: generator, labelsGenerator: labelsGenerator)

let chartFrame = ExamplesDefaults.chartFrame(view.bounds)

let chartSettings = ExamplesDefaults.chartSettingsWithPanZoom

// generate axes layers and calculate chart inner frame, based on the axis models
let coordsSpace = ChartCoordsSpaceLeftBottomSingleAxis(chartSettings: chartSettings, chartFrame: chartFrame, xModel: xModel, yModel: yModel)
let (xAxisLayer, yAxisLayer, innerFrame) = (coordsSpace.xAxisLayer, coordsSpace.yAxisLayer, coordsSpace.chartInnerFrame)

// create layer with guidelines
let guidelinesLayerSettings = ChartGuideLinesDottedLayerSettings(linesColor: UIColor.black, linesWidth: ExamplesDefaults.guidelinesWidth)
let guidelinesLayer = ChartGuideLinesDottedLayer(xAxisLayer: xAxisLayer, yAxisLayer: yAxisLayer, settings: guidelinesLayerSettings)

// view generator - this is a function that creates a view for each chartpoint
let viewGenerator = {(chartPointModel: ChartPointLayerModel, layer: ChartPointsViewsLayer, chart: Chart) -> UIView? in
    let viewSize: CGFloat = Env.iPad ? 30 : 20
    let center = chartPointModel.screenLoc
    let label = UILabel(frame: CGRect(x: center.x - viewSize / 2, y: center.y - viewSize / 2, width: viewSize, height: viewSize))
    label.backgroundColor = UIColor.green
    label.textAlignment = NSTextAlignment.center
    label.text = chartPointModel.chartPoint.y.description
    label.font = ExamplesDefaults.labelFont
    return label
}

// create layer that uses viewGenerator to display chartpoints
let chartPointsLayer = ChartPointsViewsLayer(xAxis: xAxisLayer.axis, yAxis: yAxisLayer.axis, chartPoints: chartPoints, viewGenerator: viewGenerator, mode: .translate)

// create chart instance with frame and layers
let chart = Chart(
    frame: chartFrame,
    innerFrame: innerFrame,
    settings: chartSettings,
    layers: [
        xAxisLayer,
        yAxisLayer,
        guidelinesLayer,
        chartPointsLayer
    ]
)

view.addSubview(chart.view)
self.chart = chart

图层决定如何呈现它们的数据 - 这可以通过添加子视图、(CA)图层、使用核心图形等来完成。

2. 视图生成器

基于视图的图层将使用生成器函数来生成图表点视图。此函数接收每个图表点的完整状态(模型数据、屏幕位置)并生成一个 UIView,允许任何类型的自定义。

Hello world

示例中包含一个 hello world,类似于上面的代码,并带有一些额外的解释。更改生成视图的一些属性,复制粘贴上面代码片段中使用的 chartPointsLineLayer,并将其传递给图表的图层,以在视图后面显示一条线,你已经掌握了主要概念!

重要提示!

任务

SwiftCharts 现在有一些 项目来规划功能和改进。随时选取其中任何一个主题,即使只是添加反馈。你可以为此打开一个 issue。也可以选择其他选项,例如打开一个 Slack 频道。

创建者

Ivan Schütz

如果您需要特别的东西或者时间不够,我也可以被 雇佣

鸣谢

非常感谢出色的 grafiti.io 在过去几个月里赞助了这个项目,当然也要感谢所有的 贡献者

许可证

SwiftCharts 的版权归 Ivan Schütz 所有 (c) 2015 - 2019,并根据随附的 Apache 2.0 许可证以开源形式发布。

本软件按“原样”提供,不提供任何形式的明示或暗示保证,包括但不限于适销性、特定用途适用性和非侵权性保证。在任何情况下,作者均不对任何索赔、损害或其他责任负责,无论是在合同、侵权行为还是其他方面,因本软件或本软件的使用或其他交易而产生或与之相关的。

这是 Swift 的一个端口,并且是对我在 eGym GmbH 工作时所做的一个 obj-c 项目的(大量改进的)延续 https://github.com/egymgmbh/ios-charts