iOS Chart Library 設計概念&邏輯

Kuan L. Chen edited this page on 14 Dec 2015 · 1 revision

iOS Chart Library 設計概念&邏輯

Alt text

iOS 圖表函式庫主要核心包括:

  • 8種不同的圖表型式
  • 兩個軸向的縮放(以觸控手勢、分別對軸做縮放,或者以pinch手勢做縮放)
  • 拖曳/平移(以觸控手勢)
  • 圖表結合(線圖、長條圖、離散圖、K綫圖、氣泡圖)
  • 雙(分開的)Y軸
  • 手指畫圖(以觸控手勢將值畫進圖表)
  • 將值特別標示(以客製化的跳出視圖來顯示)
  • 多個/分離的軸
  • 儲存圖表至照片膠卷 / 以PNG/JPEG來輸出
  • 預定義的顏色模板
  • 圖例(可自動產生、客製化)
  • 客製化軸(x軸以及y軸)
  • 動畫(在x與y軸建立動畫)
  • 界線(提供額外的資訊,例如最大值等等
  • 全客製化(上色、字體、圖例、顏色、背景、手勢、虛線等等。)

= 設計概念&邏輯 =

iOS-Charts library 是由 Daniel Cohen Gindi 所開發,為 Philipp Jahoda 所建立 MPAndroidChart 的 iOS 接口,兩者API 有 95% 是相同的,許多細項說明都可以從 MPAndroidChart 的 Github wiki 尋求完整開發功能細項。

在整個圖表的範例中(此以Line/Bar Chart 為例),整個函式庫的架構是從資料數據設定 -> 資料條目 -> 資料集到繪製圖表一層層的包起來,然而這中間有一些是必須設定的,有些則是能依照開發者的目標進行更多的客製化。

![Alt text](https://github.com/25sprout/ChartLib-Demo-iOS/blob/master/iOS%20Chart%20Demo%20by%2025sprout/Pic%20Resources/6.png?raw=true)

使用函式庫中有三個必須設定的東西:

  1. 資料數據(X, Y軸要顯示的資料或數值)
  2. 將資料數據(Data)轉型成函式庫中的資料條目/列(Data Entry)
  3. 將資料條目(Data Entry)整合成資料集(Data Set)

最後再將整合好的資料集(Data Set)放入 ChartData 則可在 View中顯示圖表(步驟於實作中有詳細說明)。

少了以上步驟,無法顯示圖表,更多的客製化也無法完成。

= 細部設定(客製化)=

  1. 一般設定
  2. 互動圖表設定
  3. 軸 (Axis) 設定
  4. 顏色設定
  5. 圖例設定
  6. 動態資料設定
  7. 視圖設定
  8. 動畫設定
  9. 標記 (Marker) 設定
Alt text
![Alt text](https://github.com/25sprout/ChartLib-Demo-iOS/blob/master/iOS%20Chart%20Demo%20by%2025sprout/Pic%20Resources/8.png?raw=true)

1. 一般圖表設定

  • 背景顏色設定 setBackgroundColor
  • 圖表說明文字 setDescription
    • 文字顏色 setDescriptionColor
    • 文字位置 setDescriptionPosition
    • 文字的字體 setDescriptionTypeface
    • 文字的大小 setDescriptionTextSize
    • 隱藏說明文字 setNoDataTextDescription
  • 繪製圖表後方的隔線 setDrawGridBackground
    • 隔線顏色 setGridBackgroundColor
  • 設定是否有邊框 setDrawBorders
    • 邊框顏色 setBorderColor
    • 邊框粗細 setBorderWidth
  • 設定邊框所顯示標題最大數量 setMaxVisibleValueCount

2. 圖表互動設定

  • 啟用/停用互動效果
    • 觸控模式 setTouchEnabled
    • 拖曳模式 setDragEnabled
    • 放大模式 setScaleEnabled
      • X軸放大模式 setScaleXEnabled
      • Y軸放大模式 setScaleYEnabled
      • 若停用兩指放大效果,X, Y軸將會獨立放大 setPinchZoom
      • 兩次點擊放大 setDoubleTapToZoomEnabled
    • 以拖曳方式顯示 Highlight「重點」setHighlightPerDragEnabled
    • 以點擊方式顯示 Highlight「重點」setHighlightPerTapEnabled
Alt text
  • 圖表轉軸/減速
    • 讓圖表可以持續滑動 setDragDecelerationEnabled
    • 改變圖表滑動速度 setDragDecelerationFrictionCoef

3. 軸(Axis)的設定

軸線細項設定分為四部份:

  1. 標籤 Labels:顯示 X, Y 軸得值(Value)
  2. 軸線(Axis-line):將線平行畫在X, Y軸數值旁圖表上
  3. 格線(Grid-line):將線垂直畫在X, Y軸數值旁圖表上
  4. 限制線(LimitLines):可依使用者畫出任一條線在圖表上,當作此圖的標準或限制等皆可
Alt text
  • 控制各軸的四個部分是否要畫出
    • 設定該軸是否要畫出 setEnabled
    • 設定該軸的軸線是否要畫出 setDrawAxisLine
    • 設定該軸的格線是否要畫出 setDrawGridLines
    • 設定該軸的標籤是否畫出 setDrawLabels
        [_chartView.xAxis setEnabled: YES];
        [_chartView.xAxis setDrawAxisLine: YES];
        [_chartView.xAxis setDrawGridLines: YES];
        [_chartView.xAxis setDrawLabels: YES];
  • 軸的樣式/更改
    • Label 顏色 setTextColor
    • Label 字體大小 setTextSize
    • Label 字體樣式 setTypeface
    • Grid 顏色 setGridColor
    • Grid 粗細 setGridLineWidth
    • Grid 虛線 enableGridDashedLine
    • Axis-line 顏色 setAxisLineColor
    • Axis-line 粗細 setAxisLineWidth
  • 限制線設定(若要在圖表上建立行橫向的限制線,就將之加在Y軸上; 縱軸X軸)
    • 加入限制線 addLimitLine
    • 移除限制線 removeLimitLine
    • 將限制線畫在資料後方 setDrawLimitLinesBehideData

4. X軸(X-Axis)的設定

軸線細項設定分為四部份:

  1. 標籤 Labels:顯示 X軸的值(Value)
  2. 軸線 Axis-Line:將線平行畫在X軸數值旁圖表上
  3. 格線 Grid-Line:將線垂直畫在X軸數值旁圖表上
  • 客製化軸上的值/標籤
    • 在程式化出下一個標籤時,設定跳過的標籤數 setLabelsToSkip
    • 重設跳過的標籤數 resetLabelsToSkip
    • 設定標籤與標籤間的空格 setSpaceBetweenLabels
    • 設定標籤的位置(上/下/兩邊)setPosition
    • 設定前後端是否顯示 setAvoidFirstLastClipping (目前測試無法成功2015.11)
    • 設定客製化值 setValueFormatter

5. Y軸(Y-Axis)的設定

Y軸線分為兩部份:LeftAxis & RightAxis

  • 客製化軸上的值
    • 設定是否從0開始畫 setStartAtZero
    • 設定軸線的最大顯示值 setAxisMaxValue
    • 重設軸線的最大顯示值 resetAxisMaxValue
    • setAxisMinValue
    • resetAxisMinValue
    • 設定升冪或降冪排序 setInverted
    • 設定與頂邊的間隔 setSpaceTop
    • 設定與底邊的間隔 setSpaceBottom
    • 設定只顯示最大最小值 setShowOnlyMinMax
    • 設定Y軸標籤的數量 setLabelCount
    • 設定Y軸標籤的位置 setPosition
    • 設定客製化值(ex:在value數值前面加入符號/將數值改成百分比) setValueFormatter

6. 資料設定

(此部分已於實作中說明)

7. 設定顏色

需以 DataSet 為單位來做顏色樣式的設定

  • 設定單一種顏色於圖表上 setColor
  • 以 Array 的方式設定顏色,依照矩陣裡顏色的數目顯示於圖表上各資料區間 setColors;
[set1 setColors: @[[UIColor yellowColor], [UIColor redColor], [UIColor blueColor]]];
Alt text

8. 圖例(Legend)

正常系統會在設定完資料後產生該資料集的圖例; 圖例上標籤名稱也會根據資料集名稱命名。以下是一些客製化設定圖例的方法。

  • 設定是否啟用或停用圖例 setEnabled
  • 設定圖例標籤文字顏色 setTextColor
  • 設定圖例標籤文字大小 setTextSize
  • 設定圖例標籤文字字體 setTypeface
  • 設定圖例邊界範圍,往下放或超過邊界時直接砍掉 setWordWrapEnabled
  • 設定圖例最大超界範圍 setMaxSizePercent
  • 設定圖例位置 setPosition
  • 設定圖例樣式形狀(圓、方、線)setForm
  • 設定圖例樣式大小 setFormSize
  • 設定圖例與縱軸的空間 setXEntrySpace
  • 設定圖例與橫軸的空間 setYEntrySpace
  • 設定圖例樣式與標籤名稱間的空間 setFormToTextSpace
  • 客製化圖例所有內容 setCustom
  • 重設客製化圖例內容 resetCustom
  • 增加額外的圖例 setExtra (需加入 notifyDataSetChanged 方能更改成功)
[_lineChartView.lengend setCustomWithColors: @[UIColor yellowColor], [UIColor redColor], [UIColor blueColor]] labels: @[@"google", @"android", @"Apple"]];
[_lineChartView notifyDataSetChanged];
Alt text

9. 動態即時更新資料

從資料集(Data Set)中增加或移除資料條目/列(Data Entry)並動態即時更新 ChartData 中的資料。

  • 新增資料
    • 增setVisibleXRangeMaximum個資料條目/列(Entry)到資料集(DataSet)中 addEntry
    • 增加一個資料條目/列(Entry)到資料集(DataSet)中某一特定位置 addEntryOrdered
    • 增加一個資料集(DataSet)到 ChartData 中 addDataSet
  • 刪除資料
    • 從資料集(DataSet)中移除一個資料條目/列(Entry) removeEntry
    • 從資料集(DataSet)中移除特定位置的資料條目/列(Entry) removeEntryWithXIndex
    • 從 ChartData 中移除一個資料集(DataSet) removeDataSet
    • 從 ChartData 中移除特定的資料集(DataSet) removeDataSetByIndex
    注意:每次新增或刪除資料時都必須告訴系統資料集有改變得以更新資料
_chartView notifyDataSetChanged

10. 修改視圖(Viewport) 此功能只適用於 Line, Bar, Scatter and CandleStick Chart

  • 視圖的約束方法
    • 設定X-axis區域最大的顯示範圍 setVisibleXRangeMaximum
    • 設定X-axis區域最小的顯示範圍 setVisibleXRangeMinimum
    • 設定Y-axis區域最大的顯示範圍 setVisibleYRangeMaximum
    • 設定客製化的移動視圖範圍 setViewPortOffsets
    • 重置客製化的移動視圖範圍 resetViewPortOffsets
    • 設定額外的客製化移動試圖範圍 setExtraOffsets
  • 移動視圖
    • 重設所有放大與拖曳,並讓試圖完全切合View fitScreen
    • 讓左邊的視圖移到特定的X軸位置 moveViewToX
    • 讓視圖置中移到特定的Y軸位置 moveViewToY
    • 這會將試圖依照所設定X軸位置移動左試圖並再以Y軸位置置中視圖 moveViewTo
    • 將整個視圖置中於某特定X軸與Y軸 centerViewTo
  • 放大縮小視圖
    • 放大 zoomIn
    • 縮小 zoomOut
    • 依照客製X,Y pixel比例縮放 zoom
_chartView zoom: (CGFloat) scaleY: (CGFloat) x:(CGFloat) y:(CGFloat)

11. 動畫

許多依照XY軸去跑的動畫效果可以使用,但在這邊就不多詳述。請參照Xcode上 iOS Chart library文件說明
_chartView animateWith.......

12. MarkerView(Android稱法)/BalloonMarker(iOS稱法)

Alt text
由於此部分與Android版本不太相同,在此直接貼上實作方法,其他的可以直接參照Xcode上 iOS Chart library文件說明
BalloonMarker *marker = [[BalloonMarker alloc] initWithColor: [UIColor colorWithRed: 80/255. green: 18/255. blue: 180/255. alpha: 1.0] font: [UIFont systemFontOfSize: 12.0] insets: UIEdgeInsetsMake(8.0, 8.0, 20.0, 8.0)];

marker.minimumSize = CGSizeMake(80.f, 40.f);
_chartView.marker = marker;

以上大致是整個iOS Chart Library的細節調整方法,更多詳請可以直接下載官方Demo實作學習