Highcharts 数据模块 JSON api 调用 setTimeout 30 sek
Posted
技术标签:
【中文标题】Highcharts 数据模块 JSON api 调用 setTimeout 30 sek【英文标题】：Highcharts data module JSON api call setTimeout 30 sek 【发布时间】：2018-06-02 05:48:39 【问题描述】：根据 highcharts 文档。
无法对您自己域之外的 JSON 文件使用 jQuery.getJSON() 函数。但是，可以使用 JSONP。
跨域数据。这是他们的例子：
资源：
https://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp
服务器端 php 文件：
<?php
header("content-type: application/json");
$array = array(7,4,2,8,4,1,9,3,2,16,7,12);
echo $_GET['callback']. '('. json_encode($array) . ')';
?>
javascript 使用 jQuery 调用回调函数。
$(document).ready(function()
var options =
chart:
renderTo: 'container',
type: 'spline'
,
series: []
;
var url = "http://url-to-your-remote-server/jsonp.php?callback=?";
$.getJSON(url, function(data)
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
);
);
我如何对实时数据 JSON API 调用执行相同的操作，例如 30 秒时发出 setTimeout 请求？
JSON 实时数据 URL： https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json
我已经搜索了这个答案 2 天，我只能找到这个例子，这似乎是使用 jQuery ajax() 函数创建随机数据的不同方法，而不是来自外部 URL：
https://www.highcharts.com/docs/working-with-data/live-data
使用自己的api修改代码：http://marialaustsen.com/apii.json
<html>
<head>
<title>Team memberttttts received and sent eCards</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
function visitorData (data)
$('#container').highcharts(
chart:
type: 'column'
,
title:
text: 'Average Visitors'
,
xAxis:
type: 'datetime',
labels:
formatter: function ()
return Highcharts.dateFormat('%b %e. %Y', this.value, 1);
,
yAxis:
title:
text: 'Number of visitors'
,
series: data,
);
$(document).ready(function()
$.ajax(
url: 'http://marialaustsen.com/apii.json?callback=?',
type: 'GET',
async: true,
dataType: "json",
success: function (data)
visitorData(data);
);
);
</script>
</head>
<body>
<div id="container" style="width: 75%; height: 500px; margin: 0 auto"></div>
</body>
</html>
我去掉了api文件中的header，把大括号换成了方括号： [ ["Timestamp":"1262304000","Sent ecards":"843","Sent recognition":"736","Received ecards":"21","Received recognition":"4311"] ] 我在控制台中收到此错误： marialaustsen.com/apii.json?callback=jQuery321017746123134921787_1514030331673&_=1514030331674:2 Uncaught SyntaxError: Unexpected token ：
由于我必须能够自动更新我的 api 请求，我需要找到一种方法来为 highcharts 正确获取或输出我的 json api。我在某处读到 highcharts 仅以毫秒为单位读取时间戳，但似乎语法不正确，而不是数据格式。
【问题讨论】：
【参考方案1】：这个demo可能对你有帮助：http://jsfiddle.net/kkulig/dv74ze6n/
我使用 promises 来处理异步 getJSON 请求。本主题的解决方案允许我向另一个域执行请求：Changing getJSON to JSONP
完整代码：
function getData()
return new Promise((resolve, reject) =>
$.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(recData)
resolve(recData);
);
);
(async() =>
Highcharts.chart('container',
chart:
events:
load: function()
var series = this.series[0];
setInterval(async function()
var data = await getData();
series.setData(data);
, 2000);
,
series: [
data: await getData()
]
);
)();
现场演示：http://jsfiddle.net/kkulig/dv74ze6n/
【讨论】：
感谢您的帮助。我仍然对 Highcharts 如何处理外部 json 数据感到非常困惑，大多数来自 Highcharts 自己来源的在线示例都没有提供很多复杂或外部 api 示例。此数据 URL 采用以下格式：?([[1,6],[2,5],[3,8],[4,12],[5,7],[6,7],[7, 10],[8,9],[9,13],[10,10]]);我从我的数据库中导出了一个 JSON 文件，格式如下： [ "Timestamp":"1262304000","Sent ecards":"843","Sent recognition":"736","Received ecards":"21", "Received recognition":"4311"] marialaustsen.com/api.json 如何通过 URL 将这些数据获取到 highcharts 中？非常感谢！ 此文档页面应阐明 Highcharts/Highstock 接受哪种数据格式：highcharts.com/docs/chart-concepts/series（系列中的数据段落）。 Highstock 始终使用 x 轴的 datetime 类型，因此这篇文章也应该有所帮助：highcharts.com/docs/chart-concepts/axes（DATETIME 段落）。您可以准备您的数据，使其格式为 Highcharts 可接受，或使用 keys 属性：api.highcharts.com/highcharts/plotOptions.series.keys以上是关于Highcharts 数据模块 JSON api 调用 setTimeout 30 sek的主要内容，如果未能解决你的问题，请参考以下文章
使用带有两个不同 JSON 端点的 Highcharts 向下钻取绘制条形图
带有传入 Json 数据的 Highcharts 实时图表 [已修复 []