個人開発のiOSアプリでChartsの折れ線グラフについて調べたことをまとめました。
##iOS Chartsとは
様々な形のグラフを生成できるSwiftライブラリ。折れ線グラフ以外にも棒グラフ、パイチャートなど種類とデザインが豊富。
##インストール
sudo gem install cocoapods
pod setup
cd /Users/XXX/your_xcode_directory
pod init
vim Podfile
---------------------
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'XXXXX' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for XXXXX
# ここに追加したいライブラリを設定
pod 'Charts'
end
---------------------
pod install
Chartsの利用例
・import Charts する ・StoryBoardを使う場合は、UIViewをセットしてLineChartViewのクラスとしてコードと繋ぐ ・LineChartDataSetにデータ要素(entries)、各種設定を追加 ・調整したDataSetをLineChartViewに追加 ・LineChartViewへグラフの設定をして完成import UIKit
import Charts
class StatsViewController: UIViewController {
@IBOutlet weak var lineChartView: LineChartView!
// モック用データ
let rawDataGraph: [Int] = [130, 240, 500, 550, 670, 800, 950, 1300, 1400, 1500, 1700, 2100, 2500, 3600, 4200, 4300, 4700, 4800, 5400, 5800, 5900, 6700]
override func viewDidLoad() {
super.viewDidLoad()
// Chart dataSet準備
let entries = rawDataGraph.enumerated().map { ChartDataEntry(x: Double($0.offset), y: Double($0.element)) }
let dataSet = LineChartDataSet(entries: entries)
// 線の太さ
dataSet.lineWidth = 5
// 各プロットのラベル表示
dataSet.drawValuesEnabled = false
// 各プロットの丸表示
dataSet.drawCirclesEnabled = true
// 各プロットの丸の大きさ
dataSet.circleRadius = 2
// 各プロットの丸の色
dataSet.circleColors = [UIColor.lightGray]
// 作成したデータセットをLineChartViewに追加
lineChartView.data = LineChartData(dataSet: dataSet)
// X軸のラベルの位置を下に設定
lineChartView.xAxis.labelPosition = .bottom
// X軸のラベルの色を設定
lineChartView.xAxis.labelTextColor = .systemGray
// X軸の線、グリッドを非表示にする
lineChartView.xAxis.drawGridLinesEnabled = false
lineChartView.xAxis.drawAxisLineEnabled = false
// 右側のY座標軸は非表示にする
lineChartView.rightAxis.enabled = false
// Y座標の値が0始まりになるように設定
lineChartView.leftAxis.axisMinimum = 0.0
lineChartView.leftAxis.axisMaximum = 10000.0
lineChartView.leftAxis.drawZeroLineEnabled = true
lineChartView.leftAxis.zeroLineColor = .systemGray
// グラフに境界線(横)を追加
let limitLine = ChartLimitLine(limit: 7200, label: "AAAAA")
limitLine.lineColor = .darkGray
limitLine.valueTextColor = .darkGray
lineChartView.leftAxis.addLimitLine(limitLine)
// グラフに境界線(縦)を追加
let limitLineX = ChartLimitLine(limit: 3, label: "BBBBB")
limitLineX.lineColor = .darkGray
limitLineX.valueTextColor = .darkGray
lineChartView.xAxis.addLimitLine(limitLineX)
// ラベルの数を設定
lineChartView.leftAxis.labelCount = 5
// ラベルの色を設定
lineChartView.leftAxis.labelTextColor = .systemGray
// グリッドの色を設定
lineChartView.leftAxis.gridColor = .systemGray
// 軸線は非表示にする
lineChartView.leftAxis.drawAxisLineEnabled = false
// 凡例を非表示
lineChartView.legend.enabled = false
// タップでプロットを選択できないようにする
lineChartView.highlightPerTapEnabled = false
// ピンチズームオフ
lineChartView.pinchZoomEnabled = false
// ダブルタップズームオフ
lineChartView.doubleTapToZoomEnabled = false
// アニメーションをつける
lineChartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.3, easingOption: .easeInCubic)
}
}