株式会社イデアライブの技術ブログ

こんにちは sohnishi です。今回はSwiftのチャートライブラリ【ios-charts】を使ってみたいと思います。 ios-charts

import UIKit
import Charts

class ViewController: UIViewController {

    // チャート
    var chartView: LineChartView!
    // チャートデータ
    var lineDataSet: LineChartDataSet!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // y軸のプロットデータ(検証用)
        let plotDatas = [55.0, 100.0, 80.0, 100.0, 45.0]
        initDisplay(y: plotDatas)
    }
    
    func initDisplay(y: [Double]) {
        
        
        self.chartView = LineChartView(frame: CGRect(x: 0, y: (self.view.frame.height / 2) - 200, width: self.view.frame.width, height: 400))

        // プロットデータ(y軸)を保持する配列
        var dataEntries = [ChartDataEntry]()
        
        for (i, val) in y.enumerated() {
            let dataEntry = ChartDataEntry(x: Double(i), y: val) // X軸データは、0,1,2,...
            dataEntries.append(dataEntry)
        }
        
        lineDataSet = LineChartDataSet(entries: dataEntries, label: "")
        chartView.data = LineChartData(dataSet: lineDataSet)
        
        // x軸のラベルをボトムに表示
        chartView.xAxis.labelPosition = .bottom
        // x軸のラベル数をデータの数に設定
        chartView.xAxis.labelCount = dataEntries.count - 1
        // タップでプロットを選択できないようにする
        chartView.highlightPerTapEnabled = false
        chartView.leftAxis.axisMaximum = 100 //y左軸最大値
        chartView.leftAxis.axisMinimum = 0 //y左軸最小値
        chartView.leftAxis.labelCount = 5 //y軸ラベルの表示数
        chartView.leftAxis.drawTopYLabelEntryEnabled = true // y軸の最大値のみ表示
        chartView.leftAxis.forceLabelsEnabled = true //最小最大値ラベルを必ず表示?
        chartView.rightAxis.enabled = false // Y軸右軸(値)を非表示
        chartView.extraTopOffset = 25 // 上から20pxオフセット
        chartView.legend.enabled = false // 左下のラベル非表示
        chartView.pinchZoomEnabled = false // ピンチズームオフ
        chartView.doubleTapToZoomEnabled = false // ダブルタップズームオフ
        // グラフアニメーション
        chartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)
        // グラフの色
        lineDataSet.colors = [UIColor.green]
        // プロットの色
        lineDataSet.circleColors = [UIColor.red]
        // プロットの大きさ
        lineDataSet.circleRadius = 5.0

        // 描画
        self.view.addSubview(self.chartView)
        
    }
    
}

import UIKit

import Charts

class ViewController: UIViewController {

// チャート

var chartView: LineChartView!

// チャートデータ

var lineDataSet: LineChartDataSet!

override func viewDidLoad() {

super.viewDidLoad()

// y軸のプロットデータ(検証用)

let plotDatas = [55.0, 100.0, 80.0, 100.0, 45.0]

initDisplay(y: plotDatas)

}

func initDisplay(y: [Double]) {

self.chartView = LineChartView(frame: CGRect(x: 0, y: (self.view.frame.height / 2) - 200, width: self.view.frame.width, height: 400))

// プロットデータ(y軸)を保持する配列

var dataEntries = [ChartDataEntry]()

for (i, val) in y.enumerated() {

let dataEntry = ChartDataEntry(x: Double(i), y: val) // X軸データは、0,1,2,...

dataEntries.append(dataEntry)

}

lineDataSet = LineChartDataSet(entries: dataEntries, label: "")

chartView.data = LineChartData(dataSet: lineDataSet)

// x軸のラベルをボトムに表示

chartView.xAxis.labelPosition = .bottom

// x軸のラベル数をデータの数に設定

chartView.xAxis.labelCount = dataEntries.count - 1

// タップでプロットを選択できないようにする

chartView.highlightPerTapEnabled = false

chartView.leftAxis.axisMaximum = 100 //y左軸最大値

chartView.leftAxis.axisMinimum = 0 //y左軸最小値

chartView.leftAxis.labelCount = 5 //y軸ラベルの表示数

chartView.leftAxis.drawTopYLabelEntryEnabled = true // y軸の最大値のみ表示

chartView.leftAxis.forceLabelsEnabled = true //最小最大値ラベルを必ず表示?

chartView.rightAxis.enabled = false // Y軸右軸(値)を非表示

chartView.extraTopOffset = 25 // 上から20pxオフセット

chartView.legend.enabled = false // 左下のラベル非表示

chartView.pinchZoomEnabled = false // ピンチズームオフ

chartView.doubleTapToZoomEnabled = false // ダブルタップズームオフ

// グラフアニメーション

chartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.0)

// グラフの色

lineDataSet.colors = [UIColor.green]

// プロットの色

lineDataSet.circleColors = [UIColor.red]

// プロットの大きさ

lineDataSet.circleRadius = 5.0

// 描画

self.view.addSubview(self.chartView)

}

簡単に…続きを読む

idealive tech blog

Laravelをデプロイしよう Envoyで

【Swift】ios-chartsを使ってみた

Flaskのjinja2テンプレート

AWS S3 署名付きURL

reCAPTCHA v3について

Lightsailに無料SSL証明書を設定する

いまさLaravel+PHPStorm+XDebugな話

【Swift】UITextFiledをカスタムしてStoryboardで設定できるプロパティを増やしてみる

Webフレームワーク「Flask」でWebページを作成

yotascale