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

修改后:

柱状图点击事件

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

BarHighlighter 中,添加代码:

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

修改后:

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

  1. 点击柱状图时,即便点击空白区域(两个柱状图中间)也会选中
    在 addViewStyle 方法中增加:
 //该属性可理解为点击识别范围,以每一个柱状图中心为中心
  self.maxHighlightDistance = 20
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,192评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,858评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,517评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,148评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,162评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,905评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,537评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,439评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,956评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,083评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,218评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,899评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,565评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,093评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,201评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,539评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,215评论 2 358

推荐阅读更多精彩内容