0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Swift5] Charts の折れ線グラフをカスタマイズする

Posted at

個人開発の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)
        
    }
}
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?