1. 程式人生 > >iOS Swift Charts 的使用(二):柱狀圖的實現

iOS Swift Charts 的使用(二):柱狀圖的實現

最近專案中遇到了需要獲取網站上的資料,然後以折線圖的方式表示出來的需求。於是發現了swift下非常強大的圖表庫-#

下面是這個系列的幾篇彙總:
1、折線圖
2、柱狀圖
3、餅狀圖
4、K線圖

這一篇我們來看一下有關柱狀圖的實現。實現後的效果如下圖所示:Image-1.jpg
1、我們需要匯入非常強大的圖表庫-
2、進行柱狀圖的初始化,並設定其基本樣式,同時設定代理。由於程式碼中有詳細的註釋,下面直接貼程式碼

func test4()
{
    self.barChartView.frame = CGRect(x: 0, y: 60, width: self.view.bounds.width, height: self.view.bounds.height/2 - 64)
    self.barChartView.delegate = self
    
    self.view.addSubview(self.barChartView)
    barChartView.backgroundColor = UIColor.init(red: 230/255.0, green: 253/255.0, blue: 253/255.0, alpha: 1.0)
    
    //基本樣式
    barChartView.noDataText = "You need to provide data for the chart." //沒有資料時的文字提示
    barChartView.drawValueAboveBarEnabled = true  //數值顯示在柱形的上面還是下面
    barChartView.drawBarShadowEnabled = false  //是否繪製柱形的陰影背景

    
    //barChartView的互動設定
    self.barChartView.scaleYEnabled = false  //取消Y軸縮放
    self.barChartView.doubleTapToZoomEnabled = false   //取消雙擊縮放
    self.barChartView.dragEnabled = true  //啟用拖拽圖表
    self.barChartView.dragDecelerationEnabled = false  //拖拽後是否有慣性效果
    self.barChartView.dragDecelerationFrictionCoef = 0 //拖拽後慣性效果的摩擦係數(0~1),數值越小,慣性越不明顯
    
    //設定barChartView的X軸樣式
    let xAxis = self.barChartView.xAxis
    xAxis.axisLineWidth = 1  //設定X軸線寬
    xAxis.labelPosition = .bottom  //X軸的顯示位置,預設是顯示在上面的
    xAxis.drawGridLinesEnabled = true   //不繪製網格線
    //xAxis.l = 4  //設定label間隔,若設定為1,則如果能全部顯示,則每個柱形下面都會顯示label
    xAxis.labelTextColor = UIColor.brown //label文字顏色
    xAxis.labelCount = 10
    
    self.barChartView.rightAxis.enabled = false  //不繪製右邊軸
    //設定左側Y軸的樣式
    let leftAxis = self.barChartView.leftAxis
    leftAxis.forceLabelsEnabled = false   //不強制繪製制定數量的label
    //leftAxis = false  //是否只顯示最大值和最小值
    leftAxis.axisMinimum = -40  //設定Y軸的最小值
    leftAxis.drawZeroLineEnabled = true   //從0開始繪製
    leftAxis.axisMaximum = 105   //設定Y軸的最大值
    leftAxis.inverted = false   //是否將Y軸進行上下翻轉
    leftAxis.axisLineWidth = 0.5    //Y軸線寬
    leftAxis.axisLineColor =  UIColor.black  //Y軸顏色
    leftAxis.labelCount = 5
    leftAxis.forceLabelsEnabled = false
    
    //設定Y軸上標籤的樣式
    leftAxis.labelPosition = .outsideChart   //label位置
    leftAxis.labelTextColor = UIColor.brown   //文字顏色
    leftAxis.labelFont = UIFont.systemFont(ofSize: 10)  //文字字型
    
    //設定Y軸上標籤顯示數字的格式
    let  leftFormatter = NumberFormatter()  //自定義格式
    leftFormatter.positiveSuffix = " $"  //數字字尾單位
    barChartView.leftAxis.valueFormatter = DefaultAxisValueFormatter.init(formatter: leftFormatter)
    
    //設定Y軸上網格線的樣式
    leftAxis.gridLineDashLengths = [3.0, 3.0]   //設定虛線樣式的網格線
    leftAxis.gridColor = UIColor.init(red: 200/255.0, green: 200/255.0, blue: 200/255.0, alpha: 1.0)  //網格線顏色
    leftAxis.gridAntialiasEnabled = true   //開啟抗鋸齒
    
    let limitLine = ChartLimitLine(limit: 20, label: "限制線")
    limitLine.lineWidth = 2
    limitLine.lineColor = UIColor.green
    limitLine.lineDashLengths = [5.0, 5.0]   //虛線樣式
    limitLine.labelPosition = .rightTop  //位置
    leftAxis.addLimitLine(limitLine)  //新增到Y軸上
    leftAxis.drawLimitLinesBehindDataEnabled = true  //設定限制線繪製在柱形圖的後面
    
    self.barChartView.legend.enabled = false  //不顯示圖例說明
    self.barChartView.chartDescription?.text = "" //不顯示,就設為空字串即可
    
    
    self.setData()
}

3、設定好圖表的樣式後,下面來將資料載入上去,相關程式碼如下:

func setData()
{
    var xVals = [String]()
    for i in 0...60
    {
        xVals.append(NSString(format: "%d年", i+1993) as String)
    }
    //chartView.xAxis.valueFormatter = KMChartAxisValueFormatter.init(xValues as NSArray)
    
    
    
    var yVals = [BarChartDataEntry]()
    for j in 0...60
    {
        let val = (Double)(arc4random_uniform(40))

        yVals.append(BarChartDataEntry.init(x: Double(j), y: val))
    }
    
    //建立BarChartDataSet物件,其中包含有Y軸資料資訊,以及可以設定柱形樣式
    let set1 = BarChartDataSet(values: yVals, label: "test")
    //set1.bar = 0.2  //柱形之間的間隙佔整個柱形(柱形+間隙)的比例
    set1.drawValuesEnabled = true  //是否在柱形圖上面顯示數值
    set1.highlightEnabled = false  //點選選中柱形圖是否有高亮效果,(雙擊空白處取消選中)
    set1.colors = ChartColorTemplates.material()
    
    
    //將BarChartDataSet物件放入陣列中
    
    
    var dataSets = [BarChartDataSet]()

    
    dataSets.append(set1)
    
    //建立BarChartData物件, 此物件就是barChartView需要最終資料物件
    
    self.barChartView.xAxis.valueFormatter = KMChartAxisValueFormatter.init(xVals as NSArray)
    
    let data:BarChartData = BarChartData(dataSets: dataSets)
    data.setValueFont(UIFont.init(name: "HelveticaNeue-Light", size: 10))  //文字字型
    data.setValueTextColor(UIColor.orange)  //文字顏色
    data.barWidth = 0.7
    
    //自定義資料顯示格式
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    //formatter.positiveFormat = " $"
    self.barChartView.leftAxis.valueFormatter = DefaultAxisValueFormatter.init(formatter: formatter)
    
    
    self.barChartView.data = data
    self.barChartView.animate(xAxisDuration: 1)

}

4、下面是幾個相關代理方法:

    //點選選中柱形圖時的代理方法
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
    
}

//沒有選中柱形圖時的代理方法
func chartValueNothingSelected(_ chartView: ChartViewBase){
 
}

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    
}

//捏合放大或縮小柱形圖時的代理方法
func chartScaled(_ chartView: ChartViewBase, scaleX: CGFloat, scaleY: CGFloat)
{
   
}

//拖拽圖表時的代理方法
func chartTranslated(_ chartView: ChartViewBase, dX: CGFloat, dY: CGFloat)
{
    
}

相關推薦

iOS Swift Charts 的使用()實現

最近專案中遇到了需要獲取網站上的資料,然後以折線圖的方式表示出來的需求。於是發現了swift下非常強大的圖表庫-# 下面是這個系列的幾篇彙總: 1、折線圖 2、柱狀圖 3、餅狀圖 4、K線圖 這一篇我們來看一下有關柱狀圖的實現。實現後的效果如下圖所示: 1

IOS charts框架 橫向顯示數值問題

在整合charts框架中 橫向柱狀圖是存在bug的 而且現在也沒有看到作者的修復。看了很久。把charts框架相關 Horizontal Bar 的 issues都看了一遍。找到了這邊價值很高的文章: https://github.com/danielgind

ECharts 報表事件聯動系列三,餅實現聯動

餅狀圖 img and int js函數 radius func get 執行 源碼如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type

python3繪圖示例2(基於matplotlib、分布、三角等)

ims 標準 and odi dom2 lam you vars update #!/usr/bin/env python# -*- coding:utf-8 -*-from matplotlib import pyplot as pltimport numpy as np

python3繪圖示例2(基於matplotlib、分佈圖、三角等)

#!/usr/bin/env python# -*- coding:utf-8 -*-from matplotlib import pyplot as pltimport numpy as npimport pylabimport os,sys,time,math,random# 圖1-給已有的圖加上刻度fi

Leetcode 84中最大的矩形(超詳細的解法!!!)

求在該柱狀圖中,能夠勾勒出來的矩形的最大面積。 以上是柱狀圖的示例,其中每個柱子的寬度為 1,給定的高度為 [2,1,5,6,2,3]。 圖中陰影部分為所能勾勒出的最大矩形面積,其面積為 10 個單位。 示例: 輸入: [2,1,5

ECHARTS的基本使用、折線、餅

Echarts 是由百度團隊打造的一款純 Javascript 的圖表庫,官網下載路徑如下: Echarts的特性: 豐富的圖表型別: 常用的有折線圖,柱狀圖,散點圖,餅圖,盒形圖,用於地理資料視覺化的地圖,熱力圖,線圖等 多個座標系的支援

Echarts((各引數詳細描述))

1.jsp頁面 <body> <div class="menutab"> <ul> <li id="zldb">質量等別監測預警</li&g

iOS使用Charts框架繪製—餅

首先先看一下效果: 餅狀圖 一、建立餅狀圖物件 建立餅狀圖物件用到類是PieChartView.h, 程式碼如下: self.pieChartView = [[PieChartView alloc] init]; self.pieChartView.backgroundC

MPAndroidChart3.0使用詳解()----、折線、組合的使用

上篇主要講到了MPAndroidChart這個開源庫的一些基本特性和基礎設定,現在來講下我們經常要用到的柱狀圖(直方圖)、折線圖和組合圖的使用。 柱狀圖 再講之前,先看效果圖。 第一個是單個柱狀圖,第二個是組合(group)的柱狀圖 使用 1、

Matplotlib資料視覺化(5)與直方圖

  柱狀圖和直方圖是兩種非常類似的統計圖,區別在於: 直方圖展示資料的分佈,柱狀圖比較資料的大小。 直方圖X軸為定量資料,柱狀圖X軸為分類資料。因此,直方圖上的每個條形都是不可移動的,X軸上的區間是連續的、固定的。而柱狀圖上的每個條形是可以隨意排序的,有的情況下需要按照分

【前端統計】echarts多條折線和橫實現

圖片.png 程式碼: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

echarts多條折線實現

// 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 myChart.setOption({

HighCharts靜態實現

Highcharts:功能強大、開源、美觀、圖表豐富、相容絕大多數瀏覽器的純js圖表庫     Highcharts是一款純javascript編寫的圖表庫,能夠很簡單便捷的在Web網站或Web應用中新增互動性的圖表,Highcharts目前支援直線圖、曲線圖、面積圖、

d3.js學習筆記(完整的示例

本示例採用d3的3.x版本庫,示例程式碼如下: d3.fullAxisExample = function() { var width = 240; var height = 240; //在 body 裡新增一個 SVG 畫布

iOS Swift Charts 的使用(一)折線實現

最近專案中遇到了需要獲取網站上的資料,然後以折線圖的方式表示出來的需求。於是發現了swift下非常強大的圖表庫-# 下面是這個系列的幾篇彙總: 1、折線圖 2、柱狀圖 3、餅狀圖 下面開始折線圖的實現 首先,我們可以通過cocoapods 的方式,方便的

iOS 折線、扇形封裝

導入 nbsp 並且 柱狀圖 bsp ima 集成 分享圖片 slb 封裝簡單的折線圖、柱狀圖、扇形圖 效果圖:    git地址:https://github.com/lulushen/SLChart.git 1、集成折線圖、柱狀圖、扇形圖   在ViewControl

Python交互圖表可視化Bokeh5 | 堆疊| 直方圖

數據解析 6.0 end 使用 tle 導入 我們 weight 步驟 柱狀圖/堆疊圖/直方圖 ① 單系列柱狀圖② 多系列柱狀圖③ 堆疊圖④ 直方圖 1.單系列柱狀圖 import numpy as np import pandas as pd import

Swift WKWebView()iOS與js互動

在上一篇中我們介紹了Swift下WKWebView的基本使用方法,下面總結一下iOS與js互動的實現,最終的頁面效果如下圖所示: 其中,js有關程式碼如下: function navButtonAction(name,age){

LeetCode-84.中最大的矩形(相關話題棧)

給定 n 個非負整數,用來表示柱狀圖中各個柱子的高度。每個柱子彼此相鄰,且寬度為 1 。 求在該柱狀圖中,能夠勾勒出來的矩形的最大面積。 以上是柱狀圖的示例,其中每個柱子的寬度為 1,給定的高度為 [2,1,5,6,2,3]。 圖中陰影部分為所能勾勒出的最大矩形