文章/答案/技术大牛

发布

社区首页 >问答首页 >使用树莓派从aqi.json文件更新highcharts的问题

问使用树莓派从aqi.json文件更新highcharts的问题
EN

Stack Overflow用户

提问于 2021-03-28 20:27:44

回答 1查看 41关注 0票数 0

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


</head>
<script>
$.getJSON('./aqi.json', function(data) {

  Highcharts.chart('container', {
      
????
????
????
????
    
</script>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>

What to put in script?

这是我的aqi.json文件：{"pm10"：1.5，"pm25"：0.5，"time"："07.03.2021 15:45:21"}，{"pm25"：0.4，"pm10"：1.4，"time"："07.03.2021 15:55:11"}，{"pm10"：1.0，"pm25"：0.6，"time"："18.03.2021 23:09:13"}，{"pm25"：0.5，"pm10"：0.9，"time"："18.03.2021 23:10:45"}，{"pm10"：1.0，"pm25"：0.5，"time"："18.03.2021 23:12:17"}，{"pm25"：0.5，"pm10"：0.9，"time"："18.03.2021 23:13:49"}，{"pm10"：0.6，"pm25"：0.4，"time"："18.03.2021 23:15:21"}，{"pm25"：0.4，"pm10"：0.6，"time"："18.03.2021 23:16:53"}，{"pm10"：0.6，"pm25"：0.4，"time"："18.03.2021 23:18:25"}，{"pm25"：0.5，"pm10"：0.9，"time"："18.03.2021 23:19:57"}，{"pm10"：1.0，"pm25"：0.4，"time"："18.03.2021 23:21:29"}，{"pm25"：0.5，"pm10"：2.0，"time"："21.03.2021 23:26:37"}，{"pm10"：2.8，"pm25"：0.5，"time"："21.03.2021 23:28:09"}，{"pm25"：0.6，"pm10"：2.5，"time"："21.03.2021 23:29:41"}，{"pm10"：1.8，"pm25"：0.4，"time"："21.03.2021 23:31:13"}

html

json

highcharts

raspberry-pi4

回答 1

Stack Overflow用户

发布于 2021-03-29 16:02:51

获取数据后，您需要将其解析为正确的Highcharts格式。

let data = [{
  "pm10": 1.5,
  "pm25": 0.5,
  "time": "07.03.2021 15:45:21"
}, {
  "pm25": 0.4,
  "pm10": 1.4,
  "time": "07.03.2021 15:55:11"
}, {
  "pm10": 1.0,
  "pm25": 0.6,
  "time": "18.03.2021 23:09:13"
}, {
  "pm25": 0.5,
  "pm10": 0.9,
  "time": "18.03.2021 23:10:45"
}, {
  "pm10": 1.0,
  "pm25": 0.5,
  "time": "18.03.2021 23:12:17"
}, {
  "pm25": 0.5,
  "pm10": 0.9,
  "time": "18.03.2021 23:13:49"
}, {
  "pm10": 0.6,
  "pm25": 0.4,
  "time": "18.03.2021 23:15:21"
}, {
  "pm25": 0.4,
  "pm10": 0.6,
  "time": "18.03.2021 23:16:53"
}, {
  "pm10": 0.6,
  "pm25": 0.4,
  "time": "18.03.2021 23:18:25"
}, {
  "pm25": 0.5,
  "pm10": 0.9,
  "time": "18.03.2021 23:19:57"
}, {
  "pm10": 1.0,
  "pm25": 0.4,
  "time": "18.03.2021 23:21:29"
}, {
  "pm25": 0.5,
  "pm10": 2.0,
  "time": "21.03.2021 23:26:37"
}, {
  "pm10": 2.8,
  "pm25": 0.5,
  "time": "21.03.2021 23:28:09"
}, {
  "pm25": 0.6,
  "pm10": 2.5,
  "time": "21.03.2021 23:29:41"
}, {
  "pm10": 1.8,
  "pm25": 0.4,
  "time": "21.03.2021 23:31:13"
}];

const pm25 = data.map(d => [d.time, d.pm25]);
const pm10 = data.map(d => [d.time, d.pm10]);

Highcharts.chart('container', {

  xAxis: {
    type: 'category'
  },

  series: [{
    name: 'pm25',
    data: pm25,
  }, {
    name: 'pm10',
    data: pm10
  }]
});

演示：https://jsfiddle.net/BlackLabel/m9awh4ok/

接口名：https://api.highcharts.com/highcharts/series.line.data

如果您想要为xAxis使用datetime类型，您将需要将日期格式更改为毫秒或其他被xAxis标准接受的格式。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66841430

复制

相似问题

问使用树莓派从aqi.json文件更新highcharts的问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用树莓派从aqi.json文件更新highcharts的问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用树莓派从aqi.json文件更新highcharts的问题
EN