- 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()
}
// 創(chuàng)建保存按鈕
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("保存成功")
}
// 創(chuàng)建柱狀圖
func createLineChartView()
{
chartView = LineChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
chartView.lineData
// 簽協(xié)議
chartView.delegate = self
chartView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(chartView)
}
// 加上模擬數(shù)據(jù)
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 是一個數(shù)組, 可以給相應的顏色
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協(xié)議
// 實現(xiàn) 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()
}
// 創(chuàng)建保存按鈕
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("保存成功")
}
// 創(chuàng)建柱狀圖
func createLineChartView()
{
chartView = BarChartView.init(frame: CGRectMake(0, 64, AppWidth, AppHeight - 64))
chartView.barData
// 簽協(xié)議
chartView.delegate = self
chartView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(chartView)
}
// 加上模擬數(shù)據(jù)
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 是一個數(shù)組, 可以給相應的顏色
// 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協(xié)議
// 實現(xiàn) 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
K線圖
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))
// 簽協(xié)議
chartView.delegate = self
chartView.backgroundColor = UIColor.whiteColor()
// 畫板顏色
chartView.gridBackgroundColor = UIColor.clearColor()
chartView.borderColor = UIColor.whiteColor()
self.view.addSubview(chartView)
// 橫軸數(shù)據(jù)
var xValues = [String]()
for i in 0...25 {
xValues.append(NSString(format: "%d", i + 1993) as String)
}
// 初始化CandleChartDataEntry數(shù)組
var yValues = [CandleChartDataEntry]()
// 產(chǎn)生20個隨機立柱數(shù)據(jù)
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()
// 內(nèi)部是否充滿顏色
set1.decreasingFilled = true
// open > close
set1.increasingColor = UIColor ( red: 0.0006, green: 0.2288, blue: 0.001, alpha: 1.0 )
// 內(nèi)部是否充滿顏色
set1.increasingFilled = true
// 賦值數(shù)據(jù)
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;
// 可以調(diào)整大小, 位置
pieChartView.setExtraOffsets(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0)
self.view.addSubview(pieChartView)
var yValues = [BarChartDataEntry]()
// 最好從0 開始. 否則第一個將失去點擊效果, 并出現(xiàn)bug...
// for i in 0...5 {
// // 占比數(shù)據(jù)
// 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)
// }
// 占比數(shù)據(jù)
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("數(shù)學")
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 {
}
