Javascript Highcharts-无法使用JSON/No PHP加载外部数据
我在玩HighCharts/HighStocks,并试图在不使用PHP文件的情况下自动将数据从我的报告软件传递到图表中,但我不太明白如何正确使用语法 坦率地说,我认为这不符合我的能力。我不是AJAX/Javascript/JSON程序员。我的技能在别处,在阅读了大约40页的文章后,我希望有人能帮助我 显然,当我在本地使用这个示例时,它工作得很好,但是当我尝试在get JSON行中更改源数据时,我只得到一个空页面/没有图表。我已经用这个把头撞在墙上好一阵子了,但一点运气都没有 HTML代码:Javascript Highcharts-无法使用JSON/No PHP加载外部数据,javascript,json,csv,highcharts,Javascript,Json,Csv,Highcharts,我在玩HighCharts/HighStocks,并试图在不使用PHP文件的情况下自动将数据从我的报告软件传递到图表中,但我不太明白如何正确使用语法 坦率地说,我认为这不符合我的能力。我不是AJAX/Javascript/JSON程序员。我的技能在别处,在阅读了大约40页的文章后,我希望有人能帮助我 显然,当我在本地使用这个示例时,它工作得很好,但是当我尝试在get JSON行中更改源数据时,我只得到一个空页面/没有图表。我已经用这个把头撞在墙上好一阵子了,但一点运气都没有 HTML代码: &l
<!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>
在本地服务器上,我可以使用以下链接从报表工具(从SQL数据库读取)提取数据
其结果如下:
[{f1:"[[1338732000000,29119.439],"},
{f1:"[1338818400000,30367.229],"},
{f1:"[1338904800000,29221.893],"},
{f1:"[1339336800000,29640.756]]"}]
或者我可以这样分发:
我理解上面的数据格式与HighCharts的预期略有不同
我的问题是:
<!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>
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>
var图表=空;
函数createChart(){
图表=新的高点图表。图表({
图表:{
renderTo:'容器',
键入:“行”,
},
xAxis:{
键入:“日期时间”,
标题:{
文字:“时间”
}
},
亚克斯:{
标题:{
文本:“一些数据”
}
},
系列:[{
数据:[],
名称:'一些数据',
类型:“行”
}],
});
}
$(文档).ready(函数(){
//获取JSON。。。
$.getJSON('http://localhost/script.php,函数(res、textStatus、jqXHR){
如果(关于成功){
//填充图表。。。
var点=[];
$。每个(分辨率点,函数(i,val){
push({x:val.x,y:val.y});
});
createChart();
chart.series[0]。设定值(点);
}
});
});
您使用的是jsonp而不是json。
$.getJSON('http://localserver/query=ZZZ', function(data) {
<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>