返回 导航

Swift

hangge.com

Swift - 第三方图表库Charts使用详解2(折线图1:整体样式设置)

作者:hangge | 2018-07-20 08:10
    上文我简单介绍了下折线图的使用,其实折线图还提供了许多属性和方法,可以方便我们进行一些样式的自定义,或者进行一些交互动作。下面通过样例进行演示。

一、整体样式设置

1,基本设置

(1)效果图
  • 我们将折线图整体背景修改成黄色。
  • 当折线图无数据时显示“暂无数据”提示文字。
  • 右下角添加了个红色的描述文字“考试成绩”。
  • 修改默认的手势功能,让表格只能在横向缩放(x 轴),纵向不能缩放(y 轴)。

(2)样例代码
import UIKit
import Charts

class ViewController: UIViewController {
    
    //折线图
    var chartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建折线图组件对象
        chartView = LineChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 300)
        self.view.addSubview(chartView)
        
        //折线图背景色
        chartView.backgroundColor = UIColor.yellow
        
        //折线图无数据时显示的提示文字
        chartView.noDataText = "暂无数据"
        
        //折线图描述文字和样式
        chartView.chartDescription?.text = "考试成绩"
        chartView.chartDescription?.textColor = UIColor.red
        
        //设置交互样式
        chartView.scaleYEnabled = false //取消Y轴缩放
        chartView.doubleTapToZoomEnabled = true //双击缩放
        chartView.dragEnabled = true //启用拖动手势
        chartView.dragDecelerationEnabled = true //拖拽后是否有惯性效果
        chartView.dragDecelerationFrictionCoef = 0.9 //拖拽后惯性效果摩擦系数(0~1)越小惯性越不明显

        //生成8条随机数据
        var dataEntries = [ChartDataEntry]()
        for i in 0..<8 {
            let y = arc4random()%100
            let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
            dataEntries.append(entry)
        }
        //这50条数据作为1根折线里的所有数据
        let chartDataSet = LineChartDataSet(values: dataEntries, label: "李子明")
        //目前折线图只包括1根折线
        let chartData = LineChartData(dataSets: [chartDataSet])
        
        //设置折现图数据
        chartView.data = chartData
    }
}

2,设置图形区域的背景色、边框

(1)下面样例绘制出图形区域(坐标轴内的区域)的背景色和边框,默认绘制为灰色。
chartView.drawGridBackgroundEnabled = true  //绘制图形区域背景
chartView.drawBordersEnabled = true  //绘制图形区域边框

(2)下面修改背景色和边框样式:
chartView.drawGridBackgroundEnabled = true  //绘制图形区域背景
chartView.drawBordersEnabled = true  //绘制图形区域边框
chartView.gridBackgroundColor = .yellow //背景改成黄色
chartView.borderColor = .blue  //边框为蓝色
chartView.borderLineWidth = 3  //边框线条大小为3

3,图例样式

(1)图例文字颜色
chartView.legend.textColor = UIColor.purple

(2)图例大小(头部)
chartView.legend.formSize = 5

(3)图例头部样式
  • 圆形:.circle
  • 矩形:.square(默认值)
  • 横线:.line
  • 无:.none
  • 空:.empty(与 .none 一样都不显示头部,但不同的是 empty 头部仍然会占一个位置)
chartView.legend.form = .line

附:多条折线同时显示

(1)我们只需在 LineChartData 中放入多个折线的数据,即可显示出多条折线。
import UIKit
import Charts

class ViewController: UIViewController {
    
    //折线图
    var chartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建折线图组件对象
        chartView = LineChartView()
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width - 40,
                                 height: 300)
        self.view.addSubview(chartView)
        
        //生成第一条折线数据
        var dataEntries1 = [ChartDataEntry]()
        for i in 0..<8 {
            let y = arc4random()%100
            let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
            dataEntries1.append(entry)
        }
        let chartDataSet1 = LineChartDataSet(values: dataEntries1, label: "李子明")
        
        //生成第二条折线数据
        var dataEntries2 = [ChartDataEntry]()
        for i in 0..<8 {
            let y = arc4random()%100
            let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
            dataEntries2.append(entry)
        }
        let chartDataSet2 = LineChartDataSet(values: dataEntries2, label: "王大锤")
        
        //目前折线图包括2根折线
        let chartData = LineChartData(dataSets: [chartDataSet1, chartDataSet2])
        
        //设置折现图数据
        chartView.data = chartData
    }
}

(2)运行结果如下,可以看到多条折线同时存在的话最好用不同颜色区分下,如何设置线条颜色可以参考我下一篇文章。
评论

全部评论(0)

回到顶部