iPhoneアプリ開発メモ - 棒グラフの作成(Chartsの利用)
今度は外部ライブラリChartsを利用して、棒グラフを作成してみる。 目標 値が最大のデータは色をオレンジにする アニメーションがある 棒グラフの上に値を表示する ページ切り替えができる棒グラフを作る タップしたらイベントを発生させる 1〜3、5は機能としてある。4だけ頑張って作る。思い通りのレイアウトにするためにはプロパティとかドキュメントとかを漁る必要があるが、どこにどのプロパティがあるのかは大体予想できる。 ChartDataSet.colorsで各棒の色を変更できる。 BarChartView.animate(yAxisDuration:)を利用。 BarChartView.drawValueAboveBarEnabled = trueとする。表示形式を変更するためにはChartDataSet.valueFormatterにフォーマット用のオブジェクトを指定する。 ScrollViewの中ににBarChartViewを複数配置。 ChartViewDelegateを利用。 その他デフォルトの設定だと表示する情報量が多すぎるので、いくつかのプロパティをいじる。 Chartsのインストール まず、CocoaPodsがインストールされていることが前提。 プロジェクトフォルダで以下のコマンドを実行。 1 $ pod init podfileが作成されるので、それを編集する。use_frameworks!の下に以下の記述を追加。 1 pod 'Charts' プロジェクトフォルダで以下のコマンドを実行。 1 $ pod install 以降、プロジェクトはプロジェクト名.xcodeprojではなくプロジェクト名.xcworkspaceから開く。 基本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 import UIKit import Charts struct BarChartModel { let value: Int let name: String } class ViewController: UIViewController { let barItems = [ (7, "太郎"), (1, "次郎"), (2, "三郎"), (6, "四郎"), (3, "五郎"), (9, "六郎"), (2, "七郎"), (3, "八郎"), (1, "九郎"), (5, "十郎"), (1, "十一郎"), (1, "十二郎"), (6, "十三郎") ] override func viewDidLoad() { super.viewDidLoad() let barChartView = createBarChartView() self.view.addSubview(barChartView) barChartView.translatesAutoresizingMaskIntoConstraints = false barChartView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 80).isActive = true barChartView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -80).isActive = true barChartView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true barChartView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true } private func createBarChartView() -> BarChartView { let barChartView = BarChartView() barChartView.data = createBarChartData(of: barItems.map({BarChartModel(value: $0.0, name: $0.1)})) return barChartView } private func createBarChartData(of items: [BarChartModel]) -> BarChartData { let entries: [BarChartDataEntry] = items.enumerated().map { let (i, item) = $0 return BarChartDataEntry(x: Double(i), y: Double(item.value)) } let barChartDataSet = BarChartDataSet(entries: entries, label: "Label") let barChartData = BarChartData(dataSet: barChartDataSet) return barChartData } } これだけの記述で以下の棒グラフが描ける。 ...