易于使用且高度可定制的 iOS 图表库
*这些是单独的仓库,以更好地关注和可重用性。
iOS 7+
添加到你的 Podfile
use_frameworks!
pod 'SwiftCharts', '~> 0.6.5'
直接使用 master 分支
pod 'SwiftCharts', :git => 'https://github.com/i-schuetz/SwiftCharts.git'
然后
pod install
在你的代码中导入框架
import SwiftCharts
添加到你的 Cartfile
github "i-schuetz/SwiftCharts" ~> 0.6.5
非常感谢您的贡献!要提交一个贡献
多线图
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
分层架构,使得定制图表、创建新类型、组合现有类型和添加交互式元素变得极其容易。
通过生成器函数创建视图,可以轻松地在任何层中使用自定义视图。
图表是将图层组合在一起的结果。一切都是一个图层 - 轴、参考线、分隔线、线条、圆圈等。这个想法是拥有松散耦合的组件,可以轻松地更改和组合。例如,这是一个基本图表的结构,它显示了一条带有圆圈的线
以下是一个更底层的例子,提供了对图层系统的深入了解。请注意,大多数示例都是这样编写的,以便提供最大的灵活性。
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)图层、使用核心图形等来完成。
基于视图的图层将使用生成器函数来生成图表点视图。此函数接收每个图表点的完整状态(模型数据、屏幕位置)并生成一个 UIView,允许任何类型的自定义。
示例中包含一个 hello world,类似于上面的代码,并带有一些额外的解释。更改生成视图的一些属性,复制粘贴上面代码片段中使用的 chartPointsLineLayer,并将其传递给图表的图层,以在视图后面显示一条线,你已经掌握了主要概念!
不要忘记始终保持对图表实例的强引用,否则它将被释放,这将导致轴和标签不显示。
如果你的图表中有大量轴标签,则可能需要在后台进行坐标空间的计算,以避免可能发生的延迟,这在过渡或滚动期间会很明显。请参阅 ScrollExample 或 MultipleAxesExample 示例。
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