第一步引入第三方库:https://github.com/danielgindi/Charts
我这里使用CocoaPods安装,把pod 'Charts'到您的Podfile中
第二步引用并创建相关UI
第三步新建一个swift来封装动态添加数据,我这里直接沾整个代码出来
importFoundation
importCharts
classLineChartManager{
varlineChartView:LineChartView!
varxAxis:Charts.XAxis! //X轴
varleftYAxis:Charts.YAxis!//左侧Y轴
varrightYAxis:Charts.YAxis!//右侧Y轴
vardataEntry:ChartDataEntry!
varlineChartData:LineChartData!
varlineDataSet:LineChartDataSet!
varlineDataSets:Array = []
//一条曲线
init(_mLineChart:LineChartView,_name:String,_color:NSUIColor,_xAxismin:Double,_xAxismax:Double){
self.lineChartView= mLineChart
xAxis = lineChartView.xAxis
leftYAxis = lineChartView.leftAxis
rightYAxis = lineChartView.rightAxis
initLineChart(xAxismin,xAxismax)
initLineDataSet(name, color)
}
//多条曲线
init(_mLineChart:LineChartView,_names:Array,_colors:Array,_xAxismin:Double,_xAxismax:Double){
self.lineChartView= mLineChart
xAxis = lineChartView.xAxis
leftYAxis = lineChartView.leftAxis
rightYAxis = lineChartView.rightAxis
initLineChart(xAxismin,xAxismax)
initLineDataSet(names, colors)
}
//初始化LineChar
funcinitLineChart(_xAxismin:Double,_xAxismax:Double) {
//设置交互样式
lineChartView.scaleYEnabled = false //取消Y轴缩放
lineChartView.doubleTapToZoomEnabled = false //双击缩放
lineChartView.dragEnabled = false //启用拖动手势
lineChartView.scaleXEnabled = false //禁止缩放
letlegend =lineChartView.legend
legend.horizontalAlignment = .right
legend.verticalAlignment = .top
legend.font=UIFont.systemFont(ofSize:16.0)
//设置X轴样式
xAxis.labelPosition = .bottom //X轴的显示位置,默认是显示在上面的
xAxis.drawGridLinesEnabled = false //不绘制网格线
xAxis.axisMinimum= xAxismin
xAxis.axisMaximum= xAxismax
// xAxis.labelTextColor = UIColor.white //label文字颜色
//设置Y轴样式
leftYAxis.forceLabelsEnabled = false //不强制绘制指定数量的label
rightYAxis.forceLabelsEnabled = false //不强制绘制指定数量的label
leftYAxis.drawZeroLineEnabled = true //从0开始绘制
rightYAxis.drawZeroLineEnabled = true //从0开始绘制
leftYAxis.inverted = false //是否将Y轴进行上下翻转
leftYAxis.labelPosition = .outsideChart//label位置
leftYAxis.labelFont=UIFont.systemFont(ofSize:12.0)//文字字体
rightYAxis.enabled = false
// leftYAxis!.labelTextColor = UIColor.red//文字颜色
// leftAxis.axisLineColor = UIColor.cyan//Y轴颜色
//设置网格样式
leftYAxis.drawGridLinesEnabled = false
}
//初始化一条曲线
funcinitLineDataSet(_name:String,_color:NSUIColor) {
vardataEntry = [ChartDataEntry]()
letentry =ChartDataEntry.init(x:0, y:0)
dataEntry.append(entry)
lineDataSet=LineChartDataSet(entries: dataEntry, label: name)
lineDataSet.drawCirclesEnabled = false //坐标点
lineDataSet.mode = .horizontalBezier //设置曲线是否平滑
lineDataSet.drawValuesEnabled = false
lineDataSet.colors= [color]
//初始化数据
lineChartData = LineChartData(dataSet: lineDataSet)
lineChartView.data = lineChartData
}
//初始化多条曲线
funcinitLineDataSet(_names:Array,_colors:Array) {
vardataEntry = [ChartDataEntry]()
letentry =ChartDataEntry.init(x:0, y:0)
dataEntry.append(entry)
foriin0..
lineDataSet=LineChartDataSet(entries: dataEntry, label: names[i])
lineDataSet.drawCirclesEnabled = false //坐标点
lineDataSet.mode = .horizontalBezier //设置曲线是否平滑
lineDataSet.drawValuesEnabled = false
lineDataSet.colors= [colors[i]]
lineDataSets.append(lineDataSet)
}
//初始化数据
lineChartData = LineChartData(dataSet: lineDataSet)
lineChartView.data = lineChartData
}
//动态添加一条曲线数据
funcaddEntry(number:Double){
iflineDataSet.count==0{
lineChartData.addDataSet(lineDataSet)
}
lineChartView.data = lineChartData
letentry =ChartDataEntry(x:Double(lineDataSet.count), y:Double(number));
lineChartData.addEntry(entry, dataSetIndex:0)
//通知数据已经改变
lineChartData.notifyDataChanged()
lineChartView.notifyDataSetChanged()
}
//动态添加多条曲线数据
funcaddEntry(numbers:Array){
lineChartData = LineChartData(dataSets: lineDataSets)
lineChartView.data = lineChartData
foriin0..
letentry =ChartDataEntry(x:Double(lineDataSet.count), y: numbers[i]);
lineChartData.addEntry(entry, dataSetIndex: i)
}
//通知数据已经改变
lineChartData.notifyDataChanged();
lineChartView.notifyDataSetChanged()
}
//左Y轴自定义
funcsetLeftYAxis(_min:Double,_max:Double,_setEnabled:Bool,_leftYAxisUnit:String){
ifmax < min {
return
}
leftYAxis.axisMinimum = min
leftYAxis.axisMaximum = max
leftYAxis.enabled= setEnabled
letleftValueFormatter =NumberFormatter() //自定义格式
leftValueFormatter.positiveSuffix= leftYAxisUnit //数字后缀单位
lineChartView.leftAxis.valueFormatter=DefaultAxisValueFormatter.init(formatter: leftValueFormatter)
}
//右Y轴自定义
funcsetrightYAxis(_min:Double,_max:Double,_setEnabled:Bool,_leftYAxisUnit:String){
ifmax < min {
return
}
rightYAxis.axisMinimum = min
rightYAxis.axisMaximum = max
rightYAxis.enabled= setEnabled
letrightValueFormatter =NumberFormatter() //自定义格式
rightValueFormatter.positiveSuffix= leftYAxisUnit //数字后缀单位
lineChartView.rightAxis.valueFormatter=DefaultAxisValueFormatter.init(formatter: rightValueFormatter)
}
}
最后再引用这个方法
varlineChartManager:LineChartManager!
varlineChartDate:Array = [] //数据集合
varnames:Array = [] //折线名字集合
varcolors:Array = [] //折线名字集合
varname:String!
varcolor:NSUIColor!
overridefuncviewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
name="电流"
color = NSUIColor.red
lineChartManager = LineChartManager(lineChaertView, name, color, 0, 10)
lineChartManager.setLeftYAxis(0, 40, true, String("A/V"))
lineChartManager.setrightYAxis(0, 0, false, String())
//多条
// names = ["电流","电压"]
// colors = [NSUIColor.red,NSUIColor.black]
// lineChartManager = LineChartManager(lineChaertView, names, colors, 0, 300)
// lineChartManager.setLeftYAxis(0, 40, true, String("A/V"))
// lineChartManager.setrightYAxis(0, 0, false, String())
// lineChartDate.append(10)
// lineChartDate.append(30)
// lineChartManager.addEntry(numbers: lineChartDate)
}
@IBActionfuncbuttons(_sender:UIButton) {
letdata =Double(arc4random()%40)
lineChartManager.addEntry(number: data)
}
效果如下: