Highcharts - 无法使用 JSON / 无 PHP 加载外部数据
Highcharts - Cannot load external data with JSON / No PHP
我正在玩HighCharts/HighStocks,并尝试在不使用PHP文件的情况下自动将数据从报告软件传递到图表中,但我无法弄清楚如何正确语法。
坦率地说,我认为这超出了我的范围。我不是AJAX/Javascript/JSON程序员。我的技能在别处,在浏览并阅读了大约 40 页的帖子后,我希望有人可以帮助我。
显然,当我在本地使用它时,该示例工作正常,但是当我尝试更改 get JSON 行中的源数据时,我只得到一个空页面/没有图表。我已经用这个用头撞墙已经有一段时间了,但没有任何运气。
网页代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'Container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'This is the header'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="../js/highstock.js"></script>
<script src="../js/modules/exporting.js"></script>
<div id="Container" style="height: 500px; min-width: 500px;"></div>
<p>Testing</p>
</body>
</html>
据我所知,这是我需要更改的行:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
在我的本地服务器上,我可以使用以下链接从报告工具(从 SQL 数据库读取)中提取数据。
//localserver/query=ZZZ
这输出为:
[{f1:"[[1338732000000,29119.439],"},
{f1:"[1338818400000,30367.229],"},
{f1:"[1338904800000,29221.893],"},
{f1:"[1339336800000,29640.756]]"}]
或者我可以这样传递它:
[[1338732000000,29119.439],
[1338818400000,30367.229],
[1338904800000,29221.893],
[1338991200000,31075.204],
[1339077600000,29449.717],
[1339336800000,29640.756]]
我很欣赏上面的数据格式与HighCharts的预期略有不同。
我的问题是:
a) 是否可以在不使用PHP文件的情况下通过本地服务器按需数据填充highchart?
一切都在同一/本地服务器上。报告软件有一个 Web 元素,用于查询 SQL 数据库并返回数据集。
基本上我想替换这个:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
有了这个:
$.getJSON('http://localserver/query=ZZZ', function(data) {
原因是报告软件允许用户更改日期、变量(例如国家/地区)等,然后我希望它更新图表。
b) 我可以在 html 中解析/翻译 JavaScript 中的数据吗?
我认为我遇到的一半问题是让报告软件和Highcharts Javascript握手。我已经从他们的网站上尝试了本地csv示例,但我根本无法使其工作,并且在任何地方都找不到完整的html/javascript示例。
提前感谢!
- 是的,您可以使用从SQL查询生成的JSON来填充Highcharts。他们在这里的关键是在 .getJSON 回调函数中初始化图表,并循环遍历 JSON 数据以将点添加到图表中。
以下是一些示例代码,希望能帮助您入门:
<script type="text/javascript">
var chart = null;
function createChart() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
},
xAxis: {
type: 'datetime',
title: {
text: 'Time'
}
},
yAxis: {
title: {
text: 'Some data'
}
},
series: [{
data: [],
name: 'some data',
type: 'line'
}],
});
}
$(document).ready(function() {
// Fetch JSON...
$.getJSON('http://localhost/script.php', function(res, textStatus, jqXHR) {
if (res.success) {
// Populate the chart...
var points = [];
$.each(res.points, function(i, val) {
points.push({ x : val.x, y : val.y });
});
createChart();
chart.series[0].setData(points);
}
});
});
</script>
相关文章:
- Javascript/Jquery/PHP加载页面-如何
- 使用jQuery和PHP加载区域设置变量
- 使用JS和PHP加载效果
- jQuery倒计时-应用于通过AJAX/PHP加载的新元素
- 通过php加载javascript,使其不会;t在源中直接可见
- 使用PHP加载基于用户名的不同视图
- Highcharts - 无法使用 JSON / 无 PHP 加载外部数据
- 如何通过PHP加载外部文件
- 使用 PHP 加载 CSS(可能还有 JS)
- 使用 jquery 和 php 加载更多内容
- 在javascript之后从php加载的动态图像需要运行
- 如何使用带有参数的 ajax-php 加载数据
- 如何使用php加载javascript内容
- JQuery UI在通过php加载时未检测到CSS样式
- 将事件处理程序附加到通过PHP加载的下拉选项html
- 或者,如果ajax失败,则通过php加载页面
- AJAX/Jquery/PHP-加载依赖于锚点/哈希标记的页面
- JavaScript未在PHP加载的HTML上运行
- 提交表单时从php加载动态内容
- 显示'不再发布帖子'当使用ajax php加载所有帖子时