图表Charts

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yyyyccll/article/details/91396259

//
//  ZDYBarChartView.swift
//

import UIKit
import Charts

class chartItem: NSObject {
    
    var score: String?
    var peopleCount: String?
    var percentage: String?
    
}

class ZDYBarChartView: UIView {
    
    //柱状图图
    var chartView: BarChartView!
    //打分图（节点）
    var list: [chartItem] = [] {
        didSet {
            setupUI()
        }
    }
    //悬浮框
    fileprivate let myMarkerY: MarkerView = {
        let v = MarkerView()
        v.offset = .zero
        return v
    }()
    
    fileprivate let recommendView: UITextView = {
        let textv = UITextView(frame: CGRect(x: 0, y: 0, width: 90, height: 45))
        textv.font = UIFont.systemFont(ofSize: 12, weight: .medium)
        textv.textAlignment = .left
        textv.textColor = colorWithHex(0x666666)
        textv.backgroundColor = UIColor.white
        textv.isScrollEnabled = false
        textv.isEditable = false
        textv.layer.masksToBounds = true
        textv.layer.cornerRadius = 3.0
        textv.layer.borderColor = colorWithHex(0xF2F2F2).cgColor
        textv.layer.borderWidth = 1.0
        return textv
    }()
    
    func setupUI() {
        chartView = BarChartView()
        self.addSubview(chartView)
        chartView.snp.makeConstraints {
            $0.left.equalToSuperview()
            $0.right.equalToSuperview()
            $0.top.equalToSuperview()
            $0.bottom.equalToSuperview().offset(-10)
        }
        
        configChartView(v: chartView)
        
        var dataEntries = [BarChartDataEntry]()
        for i in 0..<list.count {
            let x = list[i].score ?? "0"
            let y = list[i].peopleCount ?? "0"
            let entry = BarChartDataEntry(x: Double(x)! - 1, y: Double(y)!)
            dataEntries.append(entry)
        }
        
        let chartDataSet = BarChartDataSet(entries: dataEntries, label: "")
        let chartData = BarChartData(dataSets: [chartDataSet])
        chartView.data = chartData
        //柱子宽度
        chartData.barWidth = 0.2
        //柱子颜色
        chartDataSet.colors = [colorWithHex(0x99CBFF)]
        chartDataSet.highlightColor = colorWithHex(0x007EFF)
        chartDataSet.drawValuesEnabled = false// 不显示立柱数值文字标签
        
    }
    
    func configChartView(v: BarChartView) -> Void {
        v.backgroundColor = UIColor.white
        v.noDataText = "暂无数据"
        v.noDataFont = UIFont.systemFont(ofSize: 12, weight: .medium)
        v.noDataTextColor = colorWithHex(0x999999)
        v.chartDescription?.enabled = true
        v.scaleYEnabled = false //取消Y轴缩放
        v.doubleTapToZoomEnabled = false//取消双击缩放
        v.dragEnabled = true //启用拖拽图标
        v.dragDecelerationEnabled = true //拖拽后是否有惯性效果
        v.dragDecelerationFrictionCoef = 0.9 //拖拽后惯性效果的摩擦系数(0~1)，数值越小，惯性越不明显
        v.drawGridBackgroundEnabled = false
        
        //Y轴设置
        v.rightAxis.enabled = true //绘制右边轴,用来挤边
        let rightAxis = v.rightAxis
        rightAxis.axisLineWidth = 0
        rightAxis.gridColor = UIColor.clear
        rightAxis.labelCount = 0
        rightAxis.labelTextColor = UIColor.clear
        
        let leftAxis = v.leftAxis //获取左边Y轴
        leftAxis.labelCount = 5 //Y轴label数量，数值不一定，如果forceLabelsEnabled等于YES, 则强制绘制制定数量的label, 但是可能不平均
        leftAxis.forceLabelsEnabled = false //不强制绘制指定数量的label
        leftAxis.axisMinimum = 0 //设置Y轴的最小值
        leftAxis.axisMaximum = 105 //设置Y轴的最大值
        leftAxis.inverted = false //是否将Y轴进行上下翻转
        leftAxis.axisLineWidth = 0 //Y轴宽度
        leftAxis.labelPosition = .outsideChart //label位置
        leftAxis.labelTextColor = colorWithHex(0xc7c7c7) //文字颜色
        leftAxis.labelFont = UIFont.systemFont(ofSize: 11.0) //文字字体
        //        leftAxis.gridColor = colorWithHex(0x6C7B8A)//网格线颜色
        //        leftAxis.drawGridLinesEnabled = true
        leftAxis.gridColor = UIColor.clear //网格线颜色
        leftAxis.gridAntialiasEnabled = false //开启抗锯齿
        leftAxis.spaceBottom = 0.1
        leftAxis.drawZeroLineEnabled = true
        leftAxis.zeroLineColor = colorWithHex(0xe3e3e3)
        
        let leftAxisFormatter = NumberFormatter()
        leftAxisFormatter.numberStyle = .decimal
        leftAxisFormatter.minimumFractionDigits = 0
        leftAxisFormatter.maximumFractionDigits = 2
        leftAxis.valueFormatter = DefaultAxisValueFormatter(formatter: leftAxisFormatter)
        
        //X轴设置
        let xAxis = v.xAxis
        xAxis.granularityEnabled = true //设置重复的值不显示
        xAxis.labelPosition = .bottom //设置x轴数据在底部
        xAxis.gridColor = UIColor.clear
        xAxis.labelTextColor = colorWithHex(0x999999) //文字颜色
        xAxis.axisLineColor = UIColor.clear //X轴边线
        // xAxis.labelRotationAngle = -45// x轴角度
        
        //自定义刻度标签文字
        let xValues = ["1分","2分","3分","4分","5分"]
        xAxis.labelCount = 7// 对应最小值、最大值->区域为7
        xAxis.granularity = 1// 间隔为1
        xAxis.axisMinimum = -1// 最小值，小于0，左面空出来
        xAxis.axisMaximum = 5// 最大值，大于最大x值，右面空出来
        xAxis.forceLabelsEnabled = true
        xAxis.granularityEnabled = true
        xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues)
        
        v.maxVisibleCount = 999
        v.chartDescription?.text = "" //描述及图例样式
        v.legend.enabled = false
        // v.legend.horizontalAlignment = .center
        // v.legend.verticalAlignment = .bottom
        // v.legend.orientation = .horizontal
        // v.legend.form = .line
        // v.legend.formSize = 14.0//图示大小
        v.animate(xAxisDuration: 1.0)

        v.delegate = self //设置代理
        //设置滑动时候标签
        myMarkerY.chartView = v
        v.marker = myMarkerY
        myMarkerY.addSubview(recommendView)
    }

}


extension ZDYBarChartView: ChartViewDelegate {
    
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {

        var offsetX:CGFloat
        var offsetY:CGFloat
        let hightX = highlight.xPx
        let hightY = highlight.yPx
        if hightX + recommendView.frame.size.width > self.frame.size.width - 30 {
            offsetX = -recommendView.frame.size.width - 10
        }else{
            offsetX = 10.0
        }
        
        if hightY + recommendView.frame.size.height > self.frame.size.height - 60{
            offsetY = -recommendView.frame.size.height - 10
        }else{
            offsetY = 0.0
        }
        myMarkerY.offset = CGPoint(x: offsetX, y: offsetY)
        
        let xValue:Int = Int(entry.x)
        
        var showtext = ""
        if xValue < list.count {
            myMarkerY.isHidden = false
            
            let infoStr = "评论数：" + (list[xValue].peopleCount ?? "")
            let infoStr1 = "\n" +  "占比：" + (list[xValue].percentage ?? "")
            showtext = infoStr + infoStr1
            
        }else{
            showtext = "暂无数据"
            myMarkerY.isHidden = true
            return
        }
        let lineBreak = NSMutableParagraphStyle()
        lineBreak.lineBreakMode = .byCharWrapping
        lineBreak.lineSpacing = 1

        let attributeDict = [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 10.0), NSAttributedString.Key.foregroundColor : colorWithHex(0x666666), NSAttributedString.Key.paragraphStyle : lineBreak]
        let attStr1 = NSMutableAttributedString(string: showtext, attributes: attributeDict)
        recommendView.attributedText = attStr1
        
    }
}

//
//  TESTChartVC.swift
//

import UIKit

class TESTChartVC: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        let chartView = ZDYBarChartView()
        view.addSubview(chartView)
        chartView.snp_makeConstraints { (make) in
            make.left.right.equalToSuperview()
            make.top.equalToSuperview().offset(100)
            make.height.equalTo(200)
        }
        
        var arrayList = [chartItem]()
        for i in 0 ..< 5 {
            let arrayItem = chartItem()
            arrayItem.score = "\(i + 1)"
            arrayItem.peopleCount = "10\(i)"
            arrayItem.percentage = "\(i)"
            arrayList.append(arrayItem)
        }
        
        chartView.list = arrayList

    }
    
}