ios - 如何使用swift在折线图中显示json数据
问题描述
我正在尝试设计一个 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 数据的 swift 代码的实现。
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
}
这就是我使用 swift 代码绘制折线图的方式。
@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轴上,标上我的温湿度,并且不可能成功。我也希望我的折线图视图可以实现为布局。
解决方案
“我不知道为什么它加载了很长时间”。您的意思是打开视图后图表不会立即加载吗?这是因为数据是从远程源异步加载的(现在正确,做得很好)。您的 JSON 通过网络下载可能需要几秒钟。那没问题。您可以在浏览器中测试端点并查看响应需要多长时间。
“我希望我的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 年,它们仍将出现甚至他们之间的差距。
推荐阅读
- verilog - 从 VC709 fpga 板上的差分板载时钟创建单端时钟
- c# - json反序列化以选择类
- php - Laravel Eloquent 如果变量存在查询它
- python - 为什么嵌套列表会在 Ubuntu 14.04 上泄漏内存?
- graphql - GrahpQL:使用多个可选参数创建请求
- cassandra - Cassandra 中的阅读一致性级别
- meteor - 流星中的 Template.currentData() 到底有什么用?
- javascript - 读取传入的流式响应
- javascript - 'res.location(path)' 什么都不做?(表达)
- python - 如何在每次迭代中打印出名称/标签