ios charts图形插件 垂直柱形图barView swift使用教程加封装(赋demo)

运行效果

安装

使用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代码中下载:
点我下载