运行效果
安装
使用cocoa pod 安装
新建 podfile文件里面添加
pod ‘Charts’
pod ‘SnapKit’, ‘~> 5.0.0’
SnapKit可以不
加,但是我封装的代码里面要用约束布局,所以添加snipkit
在要使用的地方 引入库:
import Charts
import SnapKit
基本操作(未封装)
创建视图
var barView = BarChartView()
生成数据
//生成10条随机数据,
let dataEntries = (0 ..< 10).map { (i:Int)->ChartDataEntry in
if i < 7 {
//前7条只有数据
return BarChartDataEntry(x: Double(i), y: Double(i * 10))
}else{
//后3条添加图标
return BarChartDataEntry(x: Double(i), y: Double(i * 10), icon: UIImage(named: "star"))
}
}
设置其他数据
//ChartDataEntry
//给数据添加label标签
let dataSet = BarChartDataSet(entries: dataEntries, label: "图例")
//立柱颜色
// dataSet.colors = [.orange] //全部使用橙色
dataSet.colors = [.orange,.yellow,.red,.green] //几种颜色循环使用
//立柱边框宽度
dataSet.barBorderWidth = 1
//立柱边框颜色
dataSet.barBorderColor = .orange
//数据里面数组只包含一个元素,就是一个数据
let data = BarChartData(dataSets: [dataSet])
//设置柱子宽度为刻度区域的宽度,默认0.85
data.barWidth = 0.85
//给视图添加数据
barView.data = data
//是否显示立柱数值文字标签
dataSet.drawValuesEnabled = true
//数值是否显示在柱形图上面
barView.drawValueAboveBarEnabled = false
//开启每条柱形图后面的黑色阴影
barView.drawBarShadowEnabled = false
//x轴数值设置
let xAxis = barView.xAxis
//文字在底部
xAxis.labelPosition = .bottom
xAxis.labelFont = .systemFont(ofSize: 7)
xAxis.drawAxisLineEnabled = true
//x轴单位最小刻度,如果是1,就是每个1个一个刻度,如果是3,那么刻度就变成了最小3,6,9
xAxis.granularity = 1
看下封装之后的运行效果
封装后的2个不同的调用代码
//
// VCBar.swift
// Charts_Demo
//
// Created by 谭迪文 on 2021/7/27.
//
import UIKit
import Charts
class VCBar: UIViewController {
@IBOutlet weak var barV1: TDWCharstBarView!
@IBOutlet weak var barV2: TDWCharstBarView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setBarV1()
setBarV2()
}
func setBarV1(){
//柱形图1,没有图标
barV1.items = (0 ..< 10).map{
(Double($0 + 1),Double($0 * 10 ))
}
barV1.dataSet.colors = [.orange,.yellow,.red,.green] //几种颜色循环使用
}
func setBarV2(){
//如果是带图标的,就需要自己重组数据,并且设置dataSet
//生成10条随机数据
let dataEntries = (0 ..< 10).map { (i:Int)->ChartDataEntry in
if i < 7 {
//前7条只有数据
return BarChartDataEntry(x: Double(i), y: Double(i * 10))
}else{
//后3条添加图标
return BarChartDataEntry(x: Double(i), y: Double(i * 10), icon: UIImage(named: "star"))
}
}
let dataSet = BarChartDataSet(entries: dataEntries, label: "图例")
barV2.dataSet = dataSet
barV2.barView.xAxis.granularity = 2//设置x轴最小刻度
}
}
封装代码下载
封装代码内容,请在demo代码中下载:
点我下载