[Swift] [OSS] ios-chartsで簡単チャート表示

2016.02.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。加藤 潤です。iOSのアプリを開発していると円グラフや棒グラフなどのチャートを表示したい時ありますよね。 今回はそんな時に使える便利なライブラリ、ios-chartsをご紹介します。

ios-chartsとは

Daniel Cohen Gindi氏によるチャート表示ライブラリです。 元々Philipp Jahoda氏によるAndroidのチャートライブラリMPAndroidChartがあり、ios-chartsはそのiOS版となっています。 Swiftで書かれていて、Apache License 2.0で公開されています。

チャートの例

例えば以下のようなチャートを表示することができます。

折れ線グラフ

line_chart

棒グラフ

bar_chart

円グラフ

pie_chart

ローソク足チャート

candle_stick_chart

レーダーチャート

radar_chart

他にも積み上げ棒グラフやバブルチャートなども表示することができます。 どんなチャートが表示できるかはデモ用ソースコードも公開されていますのでそちらをご覧ください。

導入方法

CocoaPodsを使用すれば簡単に導入できます。 Podfileにuse_frameworks!pod 'Charts'を記載してpod installするだけです。

円グラフを表示してみた

デモ用ソースコードを参考に円グラフを表示してみました。

PieChartViewを配置

Xcodeでプロジェクトを新規に作成し、Viewを1つ配置したら「Class」をPieChartViewに変更します。 *1

pie_chart_view

配置したPieChartViewをViewControllerとIBOutletで紐付けておきます。

@IBOutlet weak var pieChartView: PieChartView!

円グラフのセットアップ

以下のようなメソッドを作ってみました。

/**
円グラフをセットアップする
*/
private func setupPieChartView() {
self.pieChartView.usePercentValuesEnabled = true
self.pieChartView.descriptionText = "チャートの説明"

// 円グラフに表示するデータ
var dataEntries = [ChartDataEntry]()
for index in (1...4).reverse() {
dataEntries.append(ChartDataEntry(value: Double(index) * 10.0, xIndex: index))
}
let dataSet = PieChartDataSet(yVals: dataEntries, label: "チャートのラベル")
dataSet.colors = ChartColorTemplates.colorful()
let data = ChartData(xVals: ["A", "B", "C", "D"], dataSet: dataSet)

// %表示
let numberFormatter = NSNumberFormatter()
numberFormatter.numberStyle = NSNumberFormatterStyle.PercentStyle;
numberFormatter.maximumFractionDigits = 1;
numberFormatter.multiplier = NSNumber(int: 1)
numberFormatter.percentSymbol = " %";
data.setValueFormatter(numberFormatter)

self.pieChartView.data = data
}

dataSet.colorsの部分で円グラフの要素の色を指定しています。 今回はテンプレートとして用意されている色の1つ、ChartColorTemplates.colorful()を使用しています。

実行すると、以下のような円グラフが表示されました。

my_pie_chart

まとめ

いかがだったでしょうか。対応しているチャートの種類も多く、オプションも豊富なため結構活用シーンがあるのではないでしょうか。 こういうライブラリが公開されているのは非常にありがたいですね。

脚注

  1. 他にも各チャートに対応したカスタムビュー(RadarChartViewなど)が用意されています。