【swift】Chartsを試してみる

今回は簡単にいろんなグラフが作成できる「Charts」を試していきたいと思います。ライセンスはApacheです。

GitHub - ChartsOrg/Charts: Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart.

Beautiful charts for iOS/tvOS/OSX! The Apple side of the crossplatform MPAndroidChart. - ChartsOrg/Charts

github.com

では、いきましょう

手順

１．まずはプロジェクトを作成して、podで該当ライブラリをインストール＆xcworkspaceを起動します。

【swift】外部ライブラリ管理 - CocoaPods

iOSのアプリ開発で外部ライブラリを導入・管理するツールはいくつかありますが、メジャーな「CocoaPods」を使ってみたいと思います。手順１．まず先にXCODEで新規プロジェクトを作成しておきます。２．ターミナルで、作成したプロジェクトの...

pomarano.site

2020.03.21

pod 'Charts'

２．storyboardでviewを配置し、Classに「PieChartView」、Moduleに「Charts」を設定します。

　　今回はPieChartを使いますが、グラフの種類としては下記が設定できるようです。

• LineChart
• CombinedChart
• BarChart
• HorizontalBarChart
• PieChart
• ScatterChart
• CandleStickChart
• BubbleChart
• RadarChart

３．ViewControllerにコードを書いていきます。storyboardのviewとoutlet接続するのを忘れずに！

import UIKit
import Charts // グラフ表示ライブラリ

class ViewController: UIViewController {
    
    // viewとoutlet接続
    @IBOutlet var pieChart: PieChartView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // グラフの中央に表示されるテキスト
        pieChart.centerText = "個人的\n果物ランキング"
        
        // グラフの右下に表示されるテキスト
        pieChart.chartDescription?.text = "このランキングは、今まで食べた果物の中から、\n独断と偏見のみで順位づけしています。"

        // データセット
        let entries = [
            PieChartDataEntry(value: 40.0, label: "桃"),
            PieChartDataEntry(value: 30.0, label: "梨"),
            PieChartDataEntry(value: 20.0, label: "みかん"),
            PieChartDataEntry(value: 10.0, label: "メロン")
        ]
        let dataSet = PieChartDataSet(entries: entries, label: "項目")
        
        // グラフの値を％表示するかどうか
        pieChart.usePercentValuesEnabled = true
        
        // グラフの色
        dataSet.colors = ChartColorTemplates.vordiplom()
        
        // データのラベル色
        dataSet.valueTextColor = .black
        
        // グラフに設定
        let chartData = PieChartData(dataSet: dataSet)
        pieChart.data = chartData
        
    }

}

４．実行結果

以上で完了です。

きれいなグラフができますね！