javascript - 来自php脚本/ unixtime的Highcharts格式json数据
问题描述
我编写了一个目标为使用 $.getJSON() 函数的 php 脚本。#
live-temp-data.php 创建一个包含如下数据的 json 文件:数据
这是结果:折线图
我究竟做错了什么 ?代码如下。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highcharts Example</title>
<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>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("live-temp-data.php", function(json) {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'steinhagen-wetter.de'
},
subtitle: {
text: '2020'
},
yAxis: {
title: {
text: 'Temperature(°C)'
}
},
time:{
timezone: 'Europe/ Berlin'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
hour: '%H:%M',
},
},
series: [{
name: 'Outside Temp °C',
data: json
}]
});
});
});
});
</script>
</head>
</html>
解决方案
1) 打开 Web 控制台,您将看到以下消息:
如果您浏览此页面,您将收到错误消息:
找不到 Moment.js 库
使用 global.timezone 选项需要加载 Moment.js 库。
所以导入那个库,或者删除这个选项,这个问题应该得到解决。
2)您的 HTML 文档无效,所有内容都在该head
部分中,您应该有一个body
包含图形容器的部分。
3)您的 JSON 无效:["[1584713222000, 6.5]","[1584713572000, 6.6]","[1584713989000, 6.7]", ...
您不应该在数据项周围加上引号。
推荐阅读
- jmeter - 在 JMeter 中的某个时间间隔后峰值单个请求
- javascript - 'Cannot read property 'color1' of undefined' error in vue.js
- django - 启动 Kiwi Tcms 时静态文件“debug_toolbar/css/print.css”不存在
- angular - 来自套接字的数据未显示在视图中
- odbc - 哪里可以下载apache kylin odbc驱动?
- docker - 众所周知的“Docker 容器看不到彼此”问题
- java - 基于排序键的 DynamoDB 降序排列
- java - Java - 扫描仪:设置 useDelimiter() 后 hasNext() 是否会相应更改?
- c# - 如何对数组中的对象进行冒泡排序?
- internet-explorer - Internet Explorer 兼容性值错误