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

回答

相關問題