LiteChart

一个轻量级的数据可视化图表框架，适用于 iOS 平台。使用 Swift 开发，基于 UIKit。

用少量的代码，您可以创建出美观显示、平滑动画、高度可定制且易于移植的图表。

功能
环境
安装
使用
联系

功能

支持范围广泛。目前支持七种图表类型，包括常用的雷达图、气泡图、散点图、折线图、柱状图、饼图和漏斗图；
平滑高性能动画。使用异步绘图来获得高性能动画；
支持两种动画。目前支持基本动画和弹簧动画，但请注意，由于动画效果，漏斗图、饼图、折线图和雷达图不支持弹簧动画效果；用户可以控制动画的暂停、重播、继续和停止；
详细的用户定制。除了基本的图表标题、x轴、y轴、单位值等，您还可以自定义参考线、各个组件的颜色配置、图例样式、图表显示方向等；
广泛的数据支持。折线图、散点图和气泡图支持负数输入，而且所有图表都没有数据限制；
易于使用。使用声明性语法，无需关注底层代码实现，只需分配相关属性，即可完成自定义图表构建；
适配深色模式。调用合适的颜色初始化方法，快速配置图表的深色显示。

雷达图	气泡图	折线图

散点图	柱状图	饼图

漏斗图

环境

iOS 13.0+

安装

cocoa pods

要使用 cocoaPods 将 LiteNetwork 集成到你的项目中，请在 Podfile 中指定它

pod 'LiteChart'

使用方法

帧图表主要由绘图区域和图表区域组成。绘图区域的主要内容是可视化数据。它还包括一系列围绕可视化数据的组件，例如坐标轴、坐标轴的单位数量、轴标题和参考线；图表区域包括内绘图区域、图表标题和图例。

1⃣🔺 创建和配置

以折线图为例

初始化折线图界面 LiteChartLineChartInterface，输入所需数据和分析标题

⚠️注意⚠️:

检查输入数据的合理性。折线图中所需的数据是元组的数组。元组的组成部分是：折线的颜色、折线类型、与折线对应的图例形状，以及折线中相应的数据数组。数据数组可以是正负数的混合，但请输入合理的数据以避免错误，框架仅对你的数据执行基本检查；轴标题数组中的计数应与输入数据数组中的计数相同。
在创建图表时，仔细阅读相应的接口文件。

var lineInterface = LiteChartLineChartInterface
(inputDatas: 
[(LiteChartDarkLightColor.init(lightUIColor: UIColor(sRGB3PRed: 2, green: 211, blue: 180)),LineStyle.dottedCubicBezierCurve, Legend.circle, [-20, 30, 40, 50, 60]), 
(LiteChartDarkLightColor.init(lightUIColor: UIColor(sRGB3PRed: 0, green: 95, blue: 151)), LineStyle.solidCubicBezierCurve, Legend.square, [1, 55, 123, 20, 70]), 
(LiteChartDarkLightColor.init(lightUIColor: UIColor(sRGB3PRed: 255, green: 165, blue: 180)),LineStyle.solidCubicBezierCurve, Legend.triangle, [-5.7, 67.89, 99.99, 155, 60.6])], 
coupleTitle: 
["Swift", "Python", "Java", "Ruby", "PHP"])

对初始化的折线图界面执行一系列自定义操作

/*Configure components*/
lineInterface.inputLegendTitles = ["2019", "2020", "2021"] // Set the display content of the legend
lineInterface.underlayerColor = .init(lightColor: .dimGray)   // Set bottom layer line color
lineInterface.unitTextColor = .init(lightColor: .dimGray)     // Set the display color of the unit quantity
lineInterface.valueUnitString = "usage"                     
lineInterface.coupleUnitString = "language"                    
/*Control components' showing and hidding*/
lineInterface.isShowValueUnitString = true                 
lineInterface.isShowCoupleUnitString = true               
lineInterface.isShowValueDividingLine = true               
lineInterface.isShowCoupleDividingLine = true              
/*Set display mode*/
lineInterface.dividingValueLineStyle = .dotted             
lineInterface.dividingCoupleLineStyle = .solid             
lineInterface.displayDataMode = .original

初始化图表界面，这里的参数是线形图表的界面实例

var interface = LiteChartViewInterface(contentInterface: lineInterface)

对初始化的图表界面执行一系列自定义操作（请注意，这些自定义操作显示在图表区域内）

interface.isShowChartTitleString = true 
interface.chartTitleString = "example"
interface.isShowLegendTitles = true

使用 LiteChartView 创建实例

let chartView = try! LiteChartView(interface: interface)

设置图表的框架并将其添加到视图中（我们在这里使用snpKit调整框架）

chartView.snp.updateConstraints{
     make in
     make.width.equalToSuperview()
     make.center.equalToSuperview()
     make.height.equalTo(300)
}
self.view.addSubview(chartView)

最终图表为：

2⃣动画添加和使用

为了实现动画展示和用户控制，需要

实例化LiteChartAnimationInterface并根据您的需求配置参数。

let interface = LiteChartAnimationInterface(
                 animationType: .base(duration: 4),       // Set the type of animation
                 delay: 0, 
                 fillModel:.both, 
                 animationTimingFunction: .init(name: .easeInEaseOut))

调用LiteChartView的startAnimation方法并传递参数以开始动画

// use the interface created before as an example
chartView.startAnimation(animation: interface)

调用pauseAnimation暂停动画

chartView.pauseAnimation()

调用continueAnimation继续动画

chartView.continueAnimation()

调用stopAnimation立即停止动画

chartView.stopAnimation()

折线图动画：其他类型动画指令：

雷达图	气泡图	散点图

饼图	漏斗图	柱状图

3⃣图表基本属性指令

属性名称	属性类型	描述	值范围
inputDatas	Array	与相应图表匹配的一组数据	任何满足条件的数组
borderStyle	LiteChartViewBorderStyle	绘图区域的边界类型	halfSurrounded, fullySurrounded
dividingValueLineStyle	AxisViewLineStyle	分割线的类型	solid, dotted, segment
displayDataMode	ChartValueDisplayMode	时间值显示模式	original, percent, mix, none
valueUnitString/coupleUnitString	String	坐标轴中显示的量单位	任何有效的字符串
underlayerColor	LiteChartDarkLightColor	底部绘制的线条颜色	颜色库中的颜色
animationType	LiteChartAnimationType	图表显示的动画类型	base, spring

联系方式

GitHub问题追踪器：问题追踪器（在此处报告错误）

Google邮箱：[email protected] 或 [email protected]（如有任何问题或建议，请联系我们）

LiteChart 1.0.1

LiteChart 1.0.1

LiteChart 1.0.1

LiteChart

功能

环境

安装

cocoa pods

使用方法

1⃣🔺 创建和配置

2⃣动画添加和使用

3⃣图表基本属性指令

联系方式