https://github.com/25sprout/ChartLib-Demo-iOS/wiki/iOS-Chart-Library-%E8%A8%AD%E8%A8%88%E6%A6%82%E5%BF%B5&%E9%82%8F%E8%BC%AF
iOS Chart Library 設計概念&邏輯
iOS Chart Library 設計概念&邏輯
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 為例），整個函式庫的架構是從資料數據設定 -> 資料條目 -> 資料集到繪製圖表一層層的包起來，然而這中間有一些是必須設定的，有些則是能依照開發者的目標進行更多的客製化。
使用函式庫中有三個必須設定的東西:
- 資料數據（X, Y軸要顯示的資料或數值）
- 將資料數據（Data）轉型成函式庫中的資料條目/列（Data Entry）
- 將資料條目（Data Entry）整合成資料集（Data Set）
最後再將整合好的資料集（Data Set）放入 ChartData 則可在 View中顯示圖表（步驟於實作中有詳細說明）。
少了以上步驟，無法顯示圖表，更多的客製化也無法完成。
= 細部設定（客製化）=
- 一般設定
- 互動圖表設定
- 軸 (Axis) 設定
- 顏色設定
- 圖例設定
- 動態資料設定
- 視圖設定
- 動畫設定
- 標記 (Marker) 設定
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
- 圖表轉軸/減速
- 讓圖表可以持續滑動 setDragDecelerationEnabled
- 改變圖表滑動速度 setDragDecelerationFrictionCoef
3. 軸(Axis)的設定
軸線細項設定分為四部份：
- 標籤 Labels：顯示 X, Y 軸得值(Value)
- 軸線（Axis-line）：將線平行畫在X, Y軸數值旁圖表上
- 格線（Grid-line）：將線垂直畫在X, Y軸數值旁圖表上
- 限制線（LimitLines）：可依使用者畫出任一條線在圖表上，當作此圖的標準或限制等皆可
- 控制各軸的四個部分是否要畫出
- 設定該軸是否要畫出 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）的設定
軸線細項設定分為四部份：
- 標籤 Labels：顯示 X軸的值（Value）
- 軸線 Axis-Line：將線平行畫在X軸數值旁圖表上
- 格線 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]]];
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];
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稱法）
由於此部分與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;
沒有留言:
張貼留言