Как показать данные JSON в линейной диаграмме с помощью Swift

Question

Я пытаюсь создать приложение ios для отображения данных json в виде линейной диаграммы.

Прежде всего, это мои данные json.

{
TH_5min: [
{
Data: "2019-02-23T00:00:00",
Time: "11:00:00",
XTP_A: 10.5, //temperature 1
XHP_A: 11.5, //humidity 1
XTP_B: 33.5,
XHP_B: 44.6,
XTP_C: 88.9,
XHP_C: 66.6,
XTP_D: 77.9,
XHP_D: 99.6,
XTP_E: 87.87,
XHP_E: 66.66
},
{
Data: "2019-02-23T00:00:00",
Time: "11:05:00",
XTP_A: 55.2,  //temperature 1
XHP_A: 44.3,  //humidity 1
XTP_B: 66.6,
XHP_B: 77.87,
XTP_C: 87.77,
XHP_C: 87.87,
XTP_D: 8.87,
XHP_D: 78.78,
XTP_E: 87.78,
XHP_E: 87.87
}
]
}

Это моя реализациябыстрый код, показывающий данные json.

override func viewDidLoad() {
        super.viewDidLoad()
      apiip = APIip
        getlatestTh_5min()
    @objc func getlatestTh_5min(){
        guard let th_5minUrl = URL(string: "http://" + apiip + "/api/Th_5min") else{
            return
        }
        let request = URLRequest(url: th_5minUrl)
        let task = URLSession.shared.dataTask(with: request, completionHandler: {(data,response,error) -> Void in
            if let error = error {
                print(error)
                return
            }
            if let data = data {
                self.th_5mins = self.pardrJsonData(data: data)
                self.getchat()
            }
        })
        task.resume()
        //getchat()
    }
    func pardrJsonData(data: Data) -> [Th_5min]{
        var th_5mins = [Th_5min]()
        do {
            let jsonResult = try JSONSerialization.jsonObject(with: data, options: JSONSerialization.ReadingOptions.mutableContainers) as? NSDictionary
            let jsonTh_5mins = jsonResult?["TH_5min"] as! [AnyObject]
            print(jsonTh_5mins)
            print(th_5mins.count)
            for jsonTh_5min in jsonTh_5mins{
                var th_5min = Th_5min()
                th_5min.Data = jsonTh_5min["Data"] as! String
                th_5min.Time = jsonTh_5min["Time"] as! String
                th_5min.XTP_A = jsonTh_5min["XTP_A"] as! Double
                th_5min.XHP_A = jsonTh_5min["XHP_A"] as! Double
                print(th_5min)
                th_5mins.append(th_5min)
                //getchat()
            }        }catch{
                print(error)
        }
        //getchat()
        return th_5mins

    }

Вот так я рисую линейную диаграмму, используя быстрый код.

@objc func getchat(){

        chartView = LineChartView()  
        chartView.frame = CGRect(x: 20, y: 80, width: self.view.bounds.width-20,height: self.view.bounds.height-100)
        self.view.addSubview(chartView)
        var dataEntries1 = [ChartDataEntry]()
        for i in 0..<th_5mins.count {
            chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: [th_5mins[i].Time])
            let y = th_5mins[i].XTP_A
            let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
            dataEntries1.append(entry)
        }
        let chartDataSet1 = LineChartDataSet(entries: dataEntries1, label: "temperature")

        chartDataSet1.colors = [NSUIColor.red]

        var dataEntries2 = [ChartDataEntry]()
        for i in 0..<th_5mins.count {
            chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: [th_5mins[i].Time])
            let y = th_5mins[i].XHP_A
            let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
            dataEntries2.append(entry)

        }
        let chartDataSet2 = LineChartDataSet(entries: dataEntries2, label: "humidity")
        chartDataSet2.colors = [NSUIColor.black]

        let chartData = LineChartData(dataSets: [chartDataSet1, chartDataSet2])

        chartView.data = chartData
    }
}

Это результат моей работы.

введите описание изображения здесь

Хотя данные JSON успешно отображаются, я не знаю, почему они загружаются в течение длительного времени, и я надеюсь, что «время» в моемДанные json могут быть отображены на оси X выше, помечены моей температурой и влажностью и не могут быть успешными.Я также надеюсь, что мой вид линейного графика может быть реализован как макет.

Answer 1

1. «Я не знаю, почему он долго загружается». Вы имеете в виду, что график не загружается сразу после открытия представления? Это связано с тем, что данные загружаются асинхронно из удаленного источника (теперь правильно, хорошо сделано). Загрузка JSON через Интернет может занять несколько секунд. Все в порядке. Вы можете проверить конечную точку в браузере и посмотреть, сколько времени займет ответ.

2. «Я надеюсь, что« время »в моих данных json может быть отображено на оси X выше». Да. Вы можете взять присвоение IndexAxisValueFormatter вне цикла, и вы должны передать все метки как values в конструктор. Попробуйте этот код, заменив эквивалентный цикл: -

   var labels: [String] = []
   for i in 0..<th_5mins.count {
       let y = th_5mins[i].XTP_A
       let entry = ChartDataEntry.init(x: Double(i), y: Double(y))
       dataEntries1.append(entry)
       labels.append(th_5mins[i].Time)
   }
   chartView.xAxis.valueFormatter = IndexAxisValueFormatter(values: labels)
   

Обратите внимание, что метод, который вы используете для построения графика по датам, приведет к равномерно распределенному графику, независимо от ваших временных интервалов (например, если показания находятся на расстоянии 5 минут между первыми двумя, но с интервалом 5 лет для следующих двух, они будут все еще появляются с четными промежутками между ними.