iOS Chart Library 實作 Manual

實作 Step One (Import)

由於 iOS Chart Library 是以 swift 撰寫，基本上目前 CocoaPod 匯入 swift 還是 beta 版所以並不建議直接透過它匯入專案內。

然而我們可以將 iOS Chart Library 下載下來，這個 zip 檔包含了函式庫（在檔案夾裡稱為 Charts），將此函式庫複製到專案根目錄上，並在 Finder 打開此函式庫資料夾，拖曳 Charts.xcodeproj 至 Xcode 專案中。 如下圖所示。


接下來，從你的 Project Navigator 選取你的專案，在右邊的 General 鍵，至 Embedded Binary 區塊，按 + 並加入 Charts 框架。從清單選取 Charts.framwork 並 Add。


（於 11/05 已經嘗試過不需要加入 swift header bridge 也可以 Build 成功; Xcode 7.1, Target iOS 9.1）

在加入 framework 後，請先編譯專案，否則 Xcode 可能會出現錯誤 「Cannot load underlying module for ‘Charts」的錯誤訊息。

現在我們可以準備建立圖表囉！（以 Bar Chart & Line Chart 為例）

實作 Step Two (Settings)

打開專案中的 header file 並加入 import 陳述。

    @import Charts;

接下來拖曳一個視圖（View）至 Storyboard，並至 Identity Inspector 將類別設為 BarChartView。加入視圖的 outlet 至 ViewController 類別。

    @property (weak, nonatomic) IBOutlet BarChartView *barChartView;

打開專案中的 header file 並加入 import 陳述。Run 此專案時由於沒有取得資料來產生圖表，此視圖將會表示：“No chart data available”。


倘若你想要客製化中間的訊息，可以在 viewDidLoad 加入以下這行函數於底部：

    _barChartView.noDataText = @"你客製化的訊息";

也可以進一步加上描述如下。這可以用來解釋給使用者，為何圖表是空白的，以及要怎麼做才能取得圖表。

    _barChartView.noDataTextDescription = @"更多詳情";

實作 Step Three (匯入資料數據）

以我這邊的範例，先建立兩個 Array 儲存圖表的數據。

@property (strong, nonatomic) NSArray *months;
@property (strong, nonatomic) NSArray *unitsSolds;

months = @[@"Jan", @"Feb", @"Mar", @"Apr", @"May", @"Jun", @"Jul", @"Aug", @"Sep", @"Oct", @"Nov", @"Dec"];
unitsSolds = @[@20.0f, @4.0f, @6.0f, @3.0f, @12.0f, @16.0f, @4.0f, @18.0f, @2.0f, @4.0f, @5.0f, @4.0f];

建立一個方法 showBarChart，在方法底下建立一個 NSMutableArray （dataEntries），為了合併與存放兩項數據。

NSMutableArray *dataEntries = [[NSMutableArray alloc]init];

以 months 的數量透過迴圈讀取 unitsSolds 相對應的數值，再透過 BarChartDataEntry 將 unitsSolds 數值實體化並對應months & unitsSolds，最後再將 BarChartDataEntry 加入至已經建立好的 NSMutableArray。

for ( int i = 0; i < months.count; i++) {

        double unitSold = [[unitsSolds objectAtIndex:i]doubleValue];
        BarChartDataEntry *dataEntry = [[BarChartDataEntry alloc] initWithValue:unitSold xIndex:i];
        [dataEntries addObject:dataEntry];
    }

將上述完成的 dataEntries 放入 BarChartDataSet 。

BarChartDataSet *chartDataSet = [[BarChartDataSet alloc] initWithYVals:dataEntries label:@"Unit Sold"];

再把 BarChartDataSet 放入 BarChartData 實體化中，並加入要在 X軸顯示的月份資料。

BarChartData *chartData = [[BarChartData alloc] initWithXVals:months dataSet:chartDataSet];

最後在視圖上呈現此 Data。

_barChartView.data = chartData;

實作（Line Chart）

基本上 step two 跟 step three 的部分幾乎是一樣，唯一的差別就是要吧插入的視圖類別改成 LineChartView。

資料設定的部分 Line Chart 可以沿用 BarChartDataEntry 的資料，並同理建立 LineChartDataSet & LineChartData 即可。

最後別忘了再將 LineChartData 放在 lineChartView 中哦～ （倘若你是直接建立 Line Chart 而不想沿用 Bar Chart 的資料，建立 Data 的語法則是 ChartDataEntry，但在這邊請注意，Bar Chart 不可以使用 ChartDataEntry 語法，否則會出現錯誤，原因可能是 Bar Chart 是一整條的在 UI 上畫出來，不像 Line Chart 是以點對點的連線顯示）