Swift Charts 绘制柱状图配置

  可以自定义一个View继承BarChartView，然后对其进行初始化配置

class CustomBarChartView: BarChartView{
    /// 是否动画
    var isAnimate : Bool = false
    /// 柱状图的数据源
    var dataSource:[CustomBarChartModel]?{
        didSet
        {
            setData()
        }
    }
    private lazy var labelCount: Int = {
        var count = dataSource?.count ?? 5
        if count > 5 {
            count = 5
        }
        return count
    }()

 override init(frame: CGRect) {
        super.init(frame: frame)
        initStyle()
    }

 required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    
   func initStyle()
   {
        addViewStyle()
        addXAxisStyle()
        addYAxisStyle()
   }
}

• 初始化页面配置

 func addViewStyle()  {
        
        self.noDataText = "You need to provide data for the chart." //没有数据时的文字提示
        
        self.drawValueAboveBarEnabled = true  //数值显示在柱形的上面
        self.drawBarShadowEnabled = true  //是否绘制柱形的阴影背景
        
        //barChartView的交互设置
        self.scaleYEnabled = false  //取消Y轴缩放
        self.doubleTapToZoomEnabled = false   //取消双击缩放
        self.dragEnabled = true  //启用拖拽图表
        self.dragDecelerationEnabled = false  //拖拽后是否有惯性效果
        self.dragDecelerationFrictionCoef = 0 //拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显
        //最大高亮距离(点击事件识别区间)
        self.maxHighlightDistance = 20
        self.legend.enabled = true  //是否显示图例
        self.legend.form = .none  // 图例样式
        self.chartDescription?.text = " " //不显示，就设为空字符串即可
      
        //图表周围的最小偏移量，值越大图表越小。默认为0
        self.extraTopOffset = 30
        self.extraBottomOffset = 10
    }

• 设置X轴样式

 //设置X轴样式
    private func addXAxisStyle(){
        
        let xAxis = self.xAxis
        xAxis.axisLineWidth = 1  //设置X轴线宽
        xAxis.labelFont = UIFont.systemFont(ofSize: 12)
        xAxis.labelPosition = .bottom  //X轴的显示位置，默认是显示在上面的
        xAxis.centerAxisLabelsEnabled = false //文字标签居中
        xAxis.granularity = 1
        xAxis.drawGridLinesEnabled = false   //不绘制网格线
        xAxis.labelTextColor = UIColor.hex(hexString: "#757575")
        //label文字颜色
        xAxis.wordWrapEnabled = true   // 换行  显示图例
        xAxis.wordWrapWidthPercent = 0.8
        //xAxis.labelRotationAngle = -30 //刻度文字倾斜角度
        
    }

• 设置Y轴样式

 //设置Y轴样式
    private func addYAxisStyle(){
        
        let leftAxis = self.leftAxis
        //leftAxis = false  //是否只显示最大值和最小值
        leftAxis.axisMinimum = 0  //设置Y轴的最小值
        leftAxis.drawZeroLineEnabled = true   //从0开始绘制
        leftAxis.axisMaximum = 100  //设置Y轴的最大值
        leftAxis.inverted = false   //是否将Y轴进行上下翻转
        leftAxis.axisLineWidth = 0.5    //Y轴线宽
        leftAxis.axisLineColor =  UIColor.black  //Y轴颜色
        leftAxis.labelCount = labelCount
        leftAxis.forceLabelsEnabled = false   //不强制绘制制定数量的label

        //设置Y轴上标签的样式
        leftAxis.labelPosition = .outsideChart   //label位置
        leftAxis.labelTextColor = UIColor.hex(hexString: "#757575")   //文字颜色
        leftAxis.labelFont = UIFont.systemFont(ofSize: 10)  //文字字体
        
        //设置Y轴上标签显示数字的格式
        let  leftFormatter = NumberFormatter()  //自定义格式
        leftFormatter.positiveSuffix = "$"  //数字后缀单位
        leftFormatter.numberStyle = .decimal
        leftAxis.valueFormatter = DefaultAxisValueFormatter.init(formatter: leftFormatter)
        leftAxis.valueFormatter = DefaultAxisValueFormatter(decimals: 2)

        
        //设置Y轴上网格线的样式
        leftAxis.gridLineDashLengths = [3.0, 3.0]   //设置虚线样式的网格线
        leftAxis.gridColor = UIColor.init(red: 200/255.0, green: 200/255.0, blue: 200/255.0, alpha: 1.0)  //网格线颜色
        leftAxis.gridAntialiasEnabled = true   //开启抗锯齿
        
        //设置右侧Y轴的样式
        let rightAxis = self.rightAxis
        rightAxis.enabled = false  //不绘制右边轴
    }

• 数据设置

func setData()
    {
        var xVals = [String]()
        var yVals = [BarChartDataEntry]()
        
        var i : Double = 0
        
        for s in dataSource ?? []{
            xVals.append(s.DeptName ?? "")
            let val = Double(s.DeptRate ?? "") ?? 0
            // 初始化
            yVals.append(BarChartDataEntry.init(x: i, y: val, data: s))
            i += 1
        }
        
        self.xAxis.valueFormatter = IndexAxisValueFormatter(values:xVals)
        
        //创建BarChartDataSet对象，其中包含有Y轴数据信息，以及可以设置柱形样式
        let set1 = BarChartDataSet(entries: yVals, label: "")
        set1.drawValuesEnabled = true  //是否在柱形图上面显示数值
        set1.highlightEnabled = true  // 是否可以点击，
        set1.highlightAlpha = 0  // 默认：CGFloat(120.0 / 255.0)
        set1.colors = [.hex(hexString: "#7786EC")]  //柱状图颜色
        set1.barShadowColor = .hex(hexString: "#F0F0F0")  //阴影颜色
        
        //将BarChartDataSet对象放入数组中
        var dataSets = [BarChartDataSet]()
        dataSets.append(set1)
        
        //创建BarChartData对象, 此对象就是barChartView需要最终数据对象
        let data:BarChartData = BarChartData(dataSets: dataSets)
        data.setValueFont(UIFont.systemFont(ofSize: 14))
        data.setValueTextColor(UIColor.hex(hexString: "#202020"))  //文字颜色
        //不显示小数
        data.setValueFormatter(DefaultValueFormatter(decimals: 0))
        
        let zoom = CGFloat(dataSource?.count ?? 0) / 5.0
        
       //设置柱状图宽度占比 及 放大的倍数
        if zoom > 1 {
            data.barWidth =  0.5   // 宽度占比
            let handler = self.viewPortHandler
            handler?.setMinimumScaleX(zoom)
            handler?.setMaximumScaleX(zoom*3)

        }else{
            data.barWidth = Double(zoom / 2.0)    // 宽度占比
            let handler = self.viewPortHandler
            handler?.setMinimumScaleX(1)
            handler?.setMaximumScaleX(3)
        }
        
        // 绑定数据
        self.data = data
        
        if isAnimate  {
            self.animate(yAxisDuration: 1)
        }else{
            self.animate(yAxisDuration: 0)
        }

    }

适配过程中出现的问题：

1. 点击选中，后需要取消选中，不能连续点击

我没找到对应的属性可以设置，所以只能修改源码进行调整，在 BarLineChartViewBase文件tapGestureRecognized方法中 lastHighlighted 为上次选中的高亮item，只需将

if h === nil || h == self.lastHighlighted 

修改为：

if h === nil

修改后：

柱状图点击事件

2. 有数据点击响应事件，点击阴影不响应的设置

在 BarHighlighter 中，添加代码：

 /// 点击位置超出了 柱状图的y值 则不响应
       guard CGFloat(high.y) > pos.y else{
           return nil
       }

修改后：

截屏2021-03-01 下午6.48.42.png

3. 点击柱状图时，即便点击空白区域(两个柱状图中间)也会选中
   在 addViewStyle 方法中增加：

 //该属性可理解为点击识别范围，以每一个柱状图中心为中心
  self.maxHighlightDistance = 20