Charts-折线图

Charts是一个很强大的工具，内容丰富。正因为内容包含之广，所以他的各种配置至关重要。下面我就为大家简单介绍一下。

• 首先下载Charts,并导入自己的项目
• 接着，可以拖一个继承LineChartView的UIView，当然也可以初始化一个

let graphView = LineChartView(frame: CGRect(x: 0, y: 0, width: DEVICE_WIDTH, height: DEVICE_HEIGHT))

• 接着是一些重要的配置

        graphView.delegate = self // 设置代理
        graphView.backgroundColor = UIColor.white // 背景颜色
        graphView.setViewPortOffsets(left: 10, top: 5, right: 15, bottom: 20) // 距离上下左右边距
        graphView.chartDescription?.enabled = false // 图形介绍
        graphView.legend.enabled = false // 图例显示与否
        graphView.dragEnabled = true // 是否允许拖拽
        // 手势放大和缩小
//        graphView.setScaleEnabled(false) // 整体设置
        graphView.scaleXEnabled = true
        graphView.scaleYEnabled = false
        graphView.drawGridBackgroundEnabled = false // 是否显示网格标志
      graphView.pinchZoomEnabled = false // x轴和y轴缩放
        // 左右Y轴都没有
        graphView.rightAxis.enabled = false
        graphView.leftAxis.enabled = false
        graphView.animate(xAxisDuration: 2.5) // 曲线图展示动画

        // X轴
        let xAxis = graphView.xAxis
        xAxis.axisLineWidth = 1 // X轴宽度
        xAxis.axisLineColor = UIColor.backgroundColor // X轴颜色
        xAxis.labelPosition = .bottom // X轴位置
        xAxis.labelFont = UIFont.systemFont(ofSize: 12) // 字体
        xAxis.labelTextColor = UIColor.themTwoColor // 字体颜色
        xAxis.drawGridLinesEnabled = false // 网格
        xAxis.labelCount = 7 // X轴显示label个数
        // 设置数据 
        var xValues: [String] = []
        var yValues: [ChartDataEntry] = []
        for i in 0..<modelList.count {
            let value = Double(modelList[i].sum)!
            let time = modelList[i].dt
            if time.characters.count == 10 {
                let arr = time.components(separatedBy: "-")
                xValues.append(arr[1] + "." + arr[2])
            } else {
                xValues.append(time)
            }
            yValues.append(ChartDataEntry.init(x: Double(i), y: value))
        }
       xAxis.valueFormatter = IndexAxisValueFormatter(values: xValues)
        var set: LineChartDataSet?
        if (graphView.data != nil) {
            set = graphView.data?.dataSets[0] as? LineChartDataSet
            set?.values = yValues
            graphView.data?.notifyDataChanged()
            graphView.notifyDataSetChanged()
        } else {
            set = LineChartDataSet.init(values: yValues, label: "订单金额")
            set?.mode = .cubicBezier // 圆滑的曲线
            set?.lineWidth = 1.5 // 曲线宽度
            set?.circleRadius = 2 // 拐点半径
            set?.setCircleColor(UIColor.colorWithHex("006fc2")) // 拐点颜色
            set?.setColor(UIColor.colorWithHex("c3daee"))
            set?.fillAlpha = 1
            set?.fillColor = UIColor.white
            set?.drawValuesEnabled = true // 是否在拐点处显示数据
            set?.drawCircleHoleEnabled = true // 是否绘制拐点中间的空心
            set?.drawFilledEnabled = false // 是否填充颜色
            // 渐变色
            let gradientColors = [ChartColorTemplates.colorFromString("#FFFFFFFF").cgColor, ChartColorTemplates.colorFromString("#FF007FFF").cgColor]
            let gradientColorsRef = CGGradient(colorsSpace: nil, colors: gradientColors as CFArray, locations: nil)
            set?.fill = Fill.fillWithLinearGradient(gradientColorsRef!, angle: 90.0)
            set?.fillAlpha = 0.3 // 填充颜色的透明度
            set?.drawHorizontalHighlightIndicatorEnabled = false // 选中时横坐标隐藏
            let data = LineChartData.init(dataSets: [set!])
            data.setValueFont(UIFont.systemFont(ofSize: 11.0))
            data.setValueTextColor(UIColor.themTwoColor)
            graphView.data = data
        }

• 最后ChartViewDelegate

    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
        print("====chartValueNothingSelected")
        graphView.centerViewToAnimated(xValue: entry.x, yValue: entry.y, axis: (graphView.data?.getDataSetByIndex(highlight.dataSetIndex).axisDependency)!, duration: 1.0)
    }
    
    func chartValueNothingSelected(_ chartView: ChartViewBase) {
        print("chartValueNothingSelected")
    }

PS: 如果点击时需要标注弹框需要的设置如下：

       let marker: GraphMarker = GraphMarker.init(color: UIColor.themOneColor, font: UIFont.systemFont(ofSize: 12.0), textColor: UIColor.white, insets: UIEdgeInsets(top: 5, left: 5, bottom: 15, right: 5))
        marker.chartView = self.graphView
        marker.minimumSize = CGSize(width: 30, height: 25)
        self.graphView.marker = marker