chartsでプロットを識別

chartsでプロットを識別

import UIKit
import Charts

class ViewController: UIViewController , ChartViewDelegate{


    @IBOutlet weak var lineChartView: LineChartView!
    
    // モック用データ
    let rawDataGraph: [Int] = [20,24,21,25,26,30,31,20]

    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 = true
        // 各プロットの丸表示
        dataSet.drawCirclesEnabled = true
        // 各プロットの丸の大きさ
        dataSet.circleRadius = 4
        // 各プロットの丸の色
        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 = 40.0
        lineChartView.leftAxis.drawZeroLineEnabled = true
        lineChartView.leftAxis.zeroLineColor = .systemGray

        // グラフに境界線(横)を追加
        let limitLine = ChartLimitLine(limit: 00, label: "AAAAA")
        limitLine.lineColor = .darkGray
        limitLine.valueTextColor = .darkGray
        lineChartView.leftAxis.addLimitLine(limitLine)

        // グラフに境界線(縦)を追加
        let limitLineX = ChartLimitLine(limit: 0, 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 = true
        // ピンチズームオフ
        lineChartView.pinchZoomEnabled = true
        // ダブルタップズームオフ
        lineChartView.doubleTapToZoomEnabled = true

        // アニメーションをつける
        lineChartView.animate(xAxisDuration: 1.0, yAxisDuration: 1.3, easingOption: .easeInCubic)
        
        lineChartView.delegate = self

    }
    func chartValueSelected(_ chartView: ChartViewBase, entry: ChartDataEntry, highlight: Highlight) {
        let xValue = entry.x
        let yValue = entry.y
        
        // 特定のX座標とY座標を使ってプロットを識別
        if xValue == 2.0  {
            print("特定のプロットがタップされました")
            // ここで特定のプロットをタップしたときの処理を記述
        }
    }
    
}

Y軸時系列データ

import UIKit
import Charts

class ViewController: UIViewController {

    @IBOutlet weak var lineChartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // JSONデータの例： { "time": ["10:00", "11:00", "12:00"], "temperature": [25.5, 26.0, 27.3] }
        let json = """
        {
            "time": ["10:00", "11:00", "12:00"],
            "temperature": [25.5, 26.0, 27.3]
        }
        """
        
        // JSONデータをデコードして構造体にマッピング
        struct ChartData: Decodable {
            let time: [String]
            let temperature: [Double]
        }
        
        do {
            let jsonData = json.data(using: .utf8)!
            let chartData = try JSONDecoder().decode(ChartData.self, from: jsonData)
            
            var dataEntries: [ChartDataEntry] = []
            for i in 0..<chartData.time.count {
                // 時間データをFloatの時刻（時と分）に変換
                let timeComponents = chartData.time[i].split(separator: ":")
                let hour = Double(timeComponents[0]) ?? 0.0
                let minute = Double(timeComponents[1]) ?? 0.0
                let timeInFloat = hour + (minute / 60.0)
                
                let dataEntry = ChartDataEntry(x: timeInFloat, y: chartData.temperature[i])
                dataEntries.append(dataEntry)
            }
            
            let dataSet = LineChartDataSet(entries: dataEntries, label: "Temperature")
            let data = LineChartData(dataSet: dataSet)
            
            lineChartView.data = data
        } catch {
            print("Error decoding JSON: \(error)")
        }
    }
}

import UIKit
import Charts

class ViewController: UIViewController {

    @IBOutlet weak var lineChartView: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // JSONデータの例： { "time": ["10:00", "11:00", "12:00"], "temperature": [25.5, 26.0, 27.3] }
        let json = """
        {
            "time": ["10:00", "11:00", "12:00"],
            "temperature": [25.5, 26.0, 27.3]
        }
        """
        
        // JSONデータをデコードして構造体にマッピング
        struct ChartData: Decodable {
            let time: [String]
            let temperature: [Double]
        }
        
        do {
            // JSONデータをバイトデータに変換
            let jsonData = json.data(using: .utf8)!
            
            // JSONデータを構造体にデコード
            let chartData = try JSONDecoder().decode(ChartData.self, from: jsonData)
            
            // チャートに追加するデータエントリの配列
            var dataEntries: [ChartDataEntry] = []
            
            // ループでJSONデータを取得してデータエントリを作成
            for i in 0..<chartData.time.count {
                // 時間データをFloatの時刻（時と分）に変換
                let timeComponents = chartData.time[i].split(separator: ":")
                let hour = Double(timeComponents[0]) ?? 0.0
                let minute = Double(timeComponents[1]) ?? 0.0
                let timeInFloat = hour + (minute / 60.0)
                
                // データエントリを作成して配列に追加
                let dataEntry = ChartDataEntry(x: timeInFloat, y: chartData.temperature[i])
                dataEntries.append(dataEntry)
            }
            
            // チャートのデータセットとラベルを作成
            let dataSet = LineChartDataSet(entries: dataEntries, label: "Temperature")
            let data = LineChartData(dataSet: dataSet)
            
            // チャートにデータをセット
            lineChartView.data = data
        } catch {
            print("Error decoding JSON: \(error)")
        }
    }
}

2つのデータ

class ViewController: UIViewController {

    @IBOutlet weak var chartView1: LineChartView!
    @IBOutlet weak var chartView2: LineChartView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // データの用意
        let dataEntries1: [ChartDataEntry] = [
            ChartDataEntry(x: 1.0, y: 10.0),
            ChartDataEntry(x: 2.0, y: 20.0),
            ChartDataEntry(x: 3.0, y: 15.0),
        ]
        
        let dataEntries2: [ChartDataEntry] = [
            ChartDataEntry(x: 1.0, y: 5.0),
            ChartDataEntry(x: 2.0, y: 25.0),
            ChartDataEntry(x: 3.0, y: 12.0),
        ]
        
        // データセットの作成
        let dataSet1 = LineChartDataSet(entries: dataEntries1, label: "Dataset 1")
        let dataSet2 = LineChartDataSet(entries: dataEntries2, label: "Dataset 2")
        
        // グラフにデータセットを設定
        chartView1.data = LineChartData(dataSet: dataSet1)
        chartView2.data = LineChartData(dataSet: dataSet2)
    }
}

class ViewController: UIViewController {

@IBOutlet weak var chartView1: LineChartView!
@IBOutlet weak var chartView2: LineChartView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    // データの用意
    let dataEntries1: [ChartDataEntry] = [
        ChartDataEntry(x: 1.0, y: 10.0),
        ChartDataEntry(x: 2.0, y: 20.0),
        ChartDataEntry(x: 3.0, y: 15.0),
    ]
    
    let dataEntries2: [ChartDataEntry] = [
        ChartDataEntry(x: 1.0, y: 5.0),
        ChartDataEntry(x: 2.0, y: 25.0),
        ChartDataEntry(x: 3.0, y: 12.0),
    ]
    
    // データセットの作成
    let dataSet1 = LineChartDataSet(entries: dataEntries1, label: "Dataset 1")
    let dataSet2 = LineChartDataSet(entries: dataEntries2, label: "Dataset 2")
    
    // グラフにデータセットを設定
    chartView1.data = LineChartData(dataSet: dataSet1)
    chartView2.data = LineChartData(dataSet: dataSet2)
}

}

@IBOutlet プロパティ:
chartView1 と chartView2 は、Storyboard上に配置された LineChartView と接続されたプロパティです。これにより、コード内でこれらのグラフビューを制御できます。

viewDidLoad メソッド:
画面が読み込まれる際に実行されるメソッドです。ここで、データの用意やグラフの設定を行います。

データの用意:
dataEntries1 と dataEntries2 には、各データポイントの x 座標と y 座標を指定しています。例えば、(x: 1.0, y: 10.0) は x 座標が 1.0 で y 座標が 10.0 というデータポイントを示しています。

データセットの作成:
LineChartDataSet は、データポイントの集まりであるデータセットを作成します。entries パラメータには、先ほど用意したデータポイントの配列を指定します。label パラメータは、グラフの凡例（ラベル）に表示されるテキストを指定します。

グラフにデータセットを設定:
LineChartData クラスにデータセットを渡して、グラフのデータを設定します。chartView1.data と chartView2.data にそれぞれのデータを設定しています。

これにより、2つの折れ線グラフが画面上に表示され、それぞれのグラフにデータが表示されるようになります。必要に応じて、色や線のスタイル、軸ラベルなどをカスタマイズすることもできます。