Highcharts - 无法使用JSON加载外部数据/不使用PHP

我正在玩HighCharts/HighStocks，并试图自动将数据从我的报告软件传送到图表中，而不使用PHP文件，但我无法完成弄清楚如何让我的语法正确。Highcharts - 无法使用JSON加载外部数据/不使用PHP

很直白，我认为这是脱离我的联盟。我不是AJAX/Javascript/JSON编码器。我的技能在别处，在阅读了大约40页的主题后，我希望有人能帮助我。

显然，当我在本地使用它时，该示例正常工作，但是当我尝试更改get JSON行中的源数据时，我只是得到一个空白页面/没有图表。这段时间以来，我一直用头撞墙，但没有任何运气。

HTML代码：

<!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]]

我理解的数据格式（S）的性能稍微不同到HighCharts的预期。

我的问题是：

一）是否有可能通过填充从本地服务器的需求数据highchart不使用PHP文件？

所有东西都在同一台/本地服务器上。报告软件有一个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) {

原因是报告软件允许用户更改日期，变量（如国家）等等，然后我d想要更新图表。

b）我可以在html中解析/翻译JavaScript中的数据吗？

我认为我遇到的一半问题是让报告软件和Highcharts Javascript握手。我已经从他们的网站尝试了本地的csv示例，但我无法完全解决这个问题，并且无法在任何地方找到完整的html/javascript示例。

在此先感谢！

来源

2012-06-30 Rusty

您正在使用JSON的JSONP代替。 – aabele

是的，你可以使用从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>

来源

2012-08-03 07:03:06 marknatividad

Highcharts - 无法使用JSON加载外部数据/不使用PHP

回答

相关问题