- LineChart 折线图
- BarChart 柱状图
- CandleStickChart K线图
- PieChart 饼状图
- RadarChart 雷达图
集成 Charts
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
pod 'Charts', '~> 2.2.5'
LineChart
import UIKit
import Charts
class TranscriptDetailViewController: UIViewController {
var name:String = ""
var chartView = LineChartView()
// 柱状图横坐标
let months = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec"
]
// 柱状的高度值
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
self.title = name
self.createLineChartView()
self.setChart(months, values: unitsSold)
self.createRightBarButtonItem()
}
// 创建保存按钮
func createRightBarButtonItem()
{
let buttonRight = UIButton.init(type: UIButtonType.Custom)
buttonRight.frame = CGRectMake(0, 0, 40, 40)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: buttonRight)
buttonRight.setTitle("Save", forState: UIControlState.Normal)
buttonRight.addTarget(self, action:#selector(self.save(_:)), forControlEvents: UIControlEvents.TouchUpInside)
}
func save(btn: UIButton)
{
// 保存到相册
chartView.saveToCameraRoll()
print("保存成功")
}
// 创建柱状图
func createLineChartView()
{
chartView = LineChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
chartView.lineData
// 签协议
chartView.delegate = self
chartView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(chartView)
}
// 加上模拟数据
func setChart(dataPoints: [String], values: [Double]) {
var dataEntries: [ChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = ChartDataEntry(value: values[i], xIndex: i)
dataEntries.append(dataEntry)
}
let chartDataSet = LineChartDataSet(yVals: dataEntries, label: "Units Sold")
let chartData = LineChartData(xVals: months, dataSet: chartDataSet)
// 加上一个界限, 演示图中红色的线
let jx = ChartLimitLine(limit: 12.0, label: "I am LimitLine")
chartView.rightAxis.addLimitLine(jx)
chartView.data = chartData
// 自定义颜色
// colors 是一个数组, 可以给相应的颜色
chartDataSet.colors = [UIColor.redColor()]
// API 自带颜色模板
// ChartColorTemplates.liberty()
// ChartColorTemplates.joyful()
// ChartColorTemplates.pastel()
// ChartColorTemplates.colorful()
// ChartColorTemplates.vordiplom()
chartDataSet.colors = ChartColorTemplates.colorful()
/**
// 动画效果, 简单列举几个, 具体请看API
case EaseInBack
case EaseOutBack
case EaseInOutBack
case EaseInBounce
case EaseOutBounce
case EaseInOutBounce
*/
chartView.animate(yAxisDuration: 1.0, easingOption: .EaseInBounce)
}
}
extension TranscriptDetailViewController : ChartViewDelegate {
// 默认的捏拉缩放和双击来进行缩放, 如果某个柱形条被单击,该柱形条会突出显示
// 所以单机某个的时候响应不同的事件, 需要自己编写 遵循ChartViewDelegate协议
// 实现 Delegate
func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) {
print("\(entry.value) in \(months[entry.xIndex])")
}
}
BarChart
import UIKit
import Charts
class TranscriptDetailViewController: UIViewController {
var name:String = ""
var chartView = BarChartView()
// 柱状图横坐标
let months = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec"
]
// 柱状的高度值
let unitsSold = [20.0, 4.0, 6.0, 3.0, 12.0, 16.0, 4.0, 18.0, 2.0, 4.0, 5.0, 4.0]
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
self.title = name
self.createLineChartView()
self.setChart(months, values: unitsSold)
self.createRightBarButtonItem()
}
// 创建保存按钮
func createRightBarButtonItem()
{
let buttonRight = UIButton.init(type: UIButtonType.Custom)
buttonRight.frame = CGRectMake(0, 0, 40, 40)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: buttonRight)
buttonRight.setTitle("Save", forState: UIControlState.Normal)
buttonRight.addTarget(self, action:#selector(self.save(_:)), forControlEvents: UIControlEvents.TouchUpInside)
}
func save(btn: UIButton)
{
// 保存到相册
chartView.saveToCameraRoll()
print("保存成功")
}
// 创建柱状图
func createLineChartView()
{
chartView = BarChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
chartView.barData
// 签协议
chartView.delegate = self
chartView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(chartView)
}
// 加上模拟数据
func setChart(dataPoints: [String], values: [Double]) {
var dataEntries: [BarChartDataEntry] = []
for i in 0..<dataPoints.count {
let dataEntry = BarChartDataEntry(value: values[i], xIndex: i)
dataEntries.append(dataEntry)
}
let chartDataSet = BarChartDataSet(yVals: dataEntries, label: "Units Sold")
let chartData = BarChartData(xVals: months, dataSet: chartDataSet)
// 加上一个界限, 演示图中红色的线
let jx = ChartLimitLine(limit: 12.0, label: "I am LimitLine")
chartView.rightAxis.addLimitLine(jx)
chartView.data = chartData
// 自定义颜色
// 例子中有十二个柱状图
// colors 是一个数组, 可以给相应的颜色
// chartDataSet.colors = [UIColor.blueColor(), UIColor.redColor(), UIColor.cyanColor()]
// API 自带颜色模板
// ChartColorTemplates.liberty()
// ChartColorTemplates.joyful()
// ChartColorTemplates.pastel()
// ChartColorTemplates.colorful()
// ChartColorTemplates.vordiplom()
// chartDataSet.colors = ChartColorTemplates.liberty()
chartDataSet.colors = ChartColorTemplates.joyful()
/**
// 动画效果, 简单列举几个, 具体请看API
case EaseInBack
case EaseOutBack
case EaseInOutBack
case EaseInBounce
case EaseOutBounce
case EaseInOutBounce
*/
chartView.animate(yAxisDuration: 1.0, easingOption: .EaseInBounce)
}
}
extension TranscriptDetailViewController : ChartViewDelegate {
// 默认的捏拉缩放和双击来进行缩放, 如果某个柱形条被单击,该柱形条会突出显示
// 所以单机某个的时候响应不同的事件, 需要自己编写 遵循ChartViewDelegate协议
// 实现 Delegate
func chartValueSelected(chartView: ChartViewBase, entry: ChartDataEntry, dataSetIndex: Int, highlight: ChartHighlight) {
print("\(entry.value) in \(months[entry.xIndex])")
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
CandleStickChart
import UIKit
import Charts
class TranscriptDetailViewController: UIViewController {
var name:String = ""
var chartView = CandleStickChartView()
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
self.title = name
self.createCandleStickChartView()
}
func createCandleStickChartView()
{
chartView = CandleStickChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
// 签协议
chartView.delegate = self
chartView.backgroundColor = UIColor.whiteColor()
// 画板颜色
chartView.gridBackgroundColor = UIColor.clearColor()
chartView.borderColor = UIColor.whiteColor()
self.view.addSubview(chartView)
// 横轴数据
var xValues = [String]()
for i in 0...25 {
xValues.append(NSString(format: "%d", i + 1993) as String)
}
// 初始化CandleChartDataEntry数组
var yValues = [CandleChartDataEntry]()
// 产生20个随机立柱数据
for j in 0...24 {
let val = (Double)(arc4random_uniform(40))
let high = (Double)(arc4random_uniform(9)) + 8.0
let low = (Double)(arc4random_uniform(9)) + 8.0
let open = (Double)(arc4random_uniform(6)) + 1.0
let close = (Double)(arc4random_uniform(6)) + 1.0
let even = j % 2 == 0
yValues.append(CandleChartDataEntry.init(xIndex: j, shadowH: val + high, shadowL: val - low, open: even ? val + open : val - open, close: even ? val - close : val + close))
}
let set1 = CandleChartDataSet.init(yVals: yValues, label: "data set")
// defult left
// set1.axisDependency
// data set color
set1.setColor(UIColor.blueColor())
set1.shadowColor = UIColor ( red: 0.5536, green: 0.5528, blue: 0.0016, alpha: 1.0 )
// 立线的宽度
set1.shadowWidth = 0.7
// close >= open
set1.decreasingColor = UIColor.redColor()
// 内部是否充满颜色
set1.decreasingFilled = true
// open > close
set1.increasingColor = UIColor ( red: 0.0006, green: 0.2288, blue: 0.001, alpha: 1.0 )
// 内部是否充满颜色
set1.increasingFilled = true
// 赋值数据
let data = CandleChartData(xVals: xValues, dataSet: set1)
chartView.data = data
}
}
extension TranscriptDetailViewController : ChartViewDelegate {
}
PieChart
import UIKit
import Charts
class TranscriptDetailViewController: UIViewController {
var name:String = ""
var pieChartView = PieChartView()
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
self.title = name
self.createPieChartView()
}
func createPieChartView()
{
pieChartView = PieChartView.init(frame: CGRectMake(0, 0, AppWidth, AppHeight))
pieChartView.delegate = self;
// 可以调整大小, 位置
pieChartView.setExtraOffsets(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0)
self.view.addSubview(pieChartView)
var yValues = [BarChartDataEntry]()
// 最好从0 开始. 否则第一个将失去点击效果, 并出现bug...
// for i in 0...5 {
// // 占比数据
// yValues.append(BarChartDataEntry.init(value: (Double)(arc4random_uniform(5)) + 2.0, xIndex: i))
//
// }
// var xValues = [String]()
//
// for j in 0...5 {
// // 描述文字
// let str = String(format: "%d", j+5)
// xValues.append(str)
// }
// 占比数据
yValues.append(BarChartDataEntry.init(value: 34, xIndex: 0))
yValues.append(BarChartDataEntry.init(value: 30, xIndex: 1))
yValues.append(BarChartDataEntry.init(value: 36, xIndex: 2))
// 描述文字
var xValues = [String]()
xValues.append("语文")
xValues.append("数学")
xValues.append("英语")
let dataSet: PieChartDataSet = PieChartDataSet.init(yVals: yValues, label: "");
// 空隙
dataSet.sliceSpace = 5.0
var colors = [UIColor]()
colors.append(UIColor ( red: 0.8185, green: 0.8172, blue: 0.0023, alpha: 1.0 ))
colors.append(UIColor ( red: 0.0, green: 0.81, blue: 0.81, alpha: 1.0 ))
colors.append(UIColor.greenColor())
colors.append(UIColor.grayColor())
colors.append(UIColor.purpleColor())
colors.append(UIColor.blueColor())
dataSet.colors = colors
// 如果你需要指示文字在外部标注百分比, 你需要这样.
dataSet.valueLinePart1OffsetPercentage = 0.8;
dataSet.valueLinePart1Length = 0.2;
dataSet.valueLinePart2Length = 0.4;
dataSet.yValuePosition = .OutsideSlice
let data = PieChartData(xVals: xValues, dataSet: dataSet)
let formatter = NSNumberFormatter.init()
formatter.maximumFractionDigits = 1
formatter.numberStyle = NSNumberFormatterStyle.PercentStyle
formatter.multiplier = 1.0
formatter.percentSymbol = " %"
data.setValueFormatter(formatter)
data.setValueTextColor(UIColor.blackColor())
pieChartView.data = data
}
}
extension TranscriptDetailViewController : ChartViewDelegate {
}
RadarChart
import UIKit
import Charts
class TranscriptDetailViewController: UIViewController {
var name:String = ""
var radarBarChartView = RadarChartView()
@IBOutlet weak var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
self.title = name
self.createRadarChartView()
}
func createRadarChartView()
{
radarBarChartView = RadarChartView.init(frame: CGRectMake(0, 0, AppWidth, AppHeight))
radarBarChartView.setExtraOffsets(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0)
// 描述文字
radarBarChartView.descriptionText = "descriptionText"
// 指向定点线的宽度
radarBarChartView.webLineWidth = 2.0
radarBarChartView.innerWebColor = UIColor.blackColor()
radarBarChartView.innerWebLineWidth = 0.75
radarBarChartView.webAlpha = 1.0
self.view.backgroundColor = UIColor.whiteColor()
self.view.addSubview(radarBarChartView)
var yValues1 = [ChartDataEntry]()
var yValues2 = [ChartDataEntry]()
var xValues = [String]()
for i in 0...8 {
yValues1.append(ChartDataEntry(value: (Double)(arc4random_uniform(5)), xIndex: i))
yValues2.append(ChartDataEntry(value: (Double)(arc4random_uniform(5)), xIndex: i))
let str = String(format: "%d", i+5)
xValues.append(str)
}
let dataSet = RadarChartDataSet.init(yVals: yValues1, label: "data Set")
dataSet.drawFilledEnabled = true
dataSet.setColor(UIColor ( red: 0.7913, green: 0.9949, blue: 0.4941, alpha: 1.0 ))
dataSet.fillColor = UIColor ( red: 0.7913, green: 0.9949, blue: 0.4941, alpha: 1.0 )
dataSet.lineWidth = 1.0
let dataSet1 = RadarChartDataSet.init(yVals: yValues2, label: "data Set2")
dataSet1.drawFilledEnabled = true
dataSet1.setColor(UIColor ( red: 0.4702, green: 1.0, blue: 0.9962, alpha: 1.0 ))
dataSet1.fillColor = UIColor ( red: 0.4702, green: 1.0, blue: 0.9962, alpha: 1.0 )
dataSet1.lineWidth = 1.5
let data = RadarChartData.init(xVals: xValues, dataSets: [dataSet, dataSet1])
radarBarChartView.data = data
}
}
extension TranscriptDetailViewController : ChartViewDelegate {
}