Javascript：如何從這個JSON數據集中繪製圖表？

我正在嘗試創建一個網頁，從Yahoo Finance中提取股票價格並在圖表中顯示數據。這是我正在開展的一個項目，作爲我正在參加的課程的一部分。Javascript：如何從這個JSON數據集中繪製圖表？

我設法檢索數據。我也可以使用Dygraphs製作一張基本圖表。但是，我不知道如何結合這兩者，即如何繪製我從雅虎財經獲得的數據的圖表。

的問題是，我從雅虎財經檢索數據正在JSON格式，而Dygraphs接受格式化爲CSV數據。

我試圖解析JSON數據集，並創建格式化爲CSV字符串，以便將其提供給Dygraphs，但我還沒有成功。

我是新來的HTML/CSS/Javascript和我掙扎。有人可以提出一個方向嗎？ - 我可以使用哪些函數來解析Dygraphs可以使用的格式的數據？ - 或者我應該嘗試以不同的格式獲取數據（這是我一開始嘗試的，但我沒有成功）？ - 或者我應該切換到另一個適用於JSON的圖表庫嗎？

這裏是我必須檢索雅虎財經的數據（它主要是由www.fincluster.com所）代碼： http://jsfiddle.net/lcazarre/Eajt6/

的Javascript：

(function($) { 
    function getStock(type, complete) { 
     var defs = { 
      desc: false, 
      baseURL: 'http://query.yahooapis.com/v1/public/yql?q=', 
      query: { 
       quotes: 'select * from yahoo.finance.quotes where symbol = "{stock}" | sort(field="{sortBy}", descending="{desc}")', 
       historicaldata: 'select * from yahoo.finance.historicaldata where symbol = "{stock}" and startDate = "{startDate}" and endDate = "{endDate}"' 
      }, 
      suffixURL: { 
       quotes: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?', 
       historicaldata: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?' 
      } 
     }; 

     var query = defs.query[type] 
     .replace('{stock}', $("#inputSymbol").val()) 
     .replace('{sortBy}', defs.sortBy) 
     .replace('{desc}', defs.desc) 
     .replace('{startDate}', $("#startDate").val()) 
     .replace('{endDate}', $("#endDate").val()) 

     var url = defs.baseURL + query + (defs.suffixURL[type] || ''); 
     $.getJSON(url, function(data) { 
      var err = null; 
      if (!data || !data.query) { 
       err = true; 
      } 
      complete(err, !err && data.query.results); 
      alert(data.query.results); 
     }); 
    } 
    window.getStock = getStock; 
})(jQuery);

HTML：

<body> 
<div id="maindiv"> 

    <header> 
     <hgroup> 
      <h1> Retrieve stock information </h1> 
      <h6> (Data provided by Yahoo! Finance) </h6> 
     </hgroup> 
    </header> 

    <div> 
     <p>Input a list of tickers (e.g. "AAPL" for Apple Inc), separated by commas</p> 
     <input type="text" id="inputSymbol" /> 

     <p>Input the start date, formatted as 'YYYY-DD-MM'</p> 
     <input type="text" id="startDate" /> 

     <p>Input the end date, formatted as 'YYYY-DD-MM'</p> 
     <input type="text" id="endDate" /> 

     <p>Click on the button to launch the query</p> 
     <button type="submit" onclick="getStock('historicaldata', function(err, data) { 
      console.log(data); 
     });">Add the tickers to the table</button> 
    </div> 

</div> 
</body>

來源

2014-02-25 lcazarre

根據文檔，您可以傳遞一個返回數據的函數：

{字符串|函數} 文件含有CSV數據或，用於返回該數據的功能的文件。每行的最基本預期格式是「YYYY/MM/DD，val1，val2，...」。有關更多信息，請參見http://dygraphs.com/data.html。

繼鏈接並查找「功能」他們講的：
http://dygraphs.com/data.html#function 他們留下唯一要注意的是：

函數可以返回字符串，數組，數據表，URL或任何其他數據類型。

我會建議嘗試傳遞類似於csv文件的各種類型的數據以查看圖表是如何工作的。

來源

2014-02-25 00:47:43 Gauthier

感謝。我終於設法以csv格式提供數據的二元圖。這其實並不難，但我對JavaScript很陌生，我有一切可以學習。詳情請參閱下面的答案。 – lcazarre

我設法格式化數據Dygraphs：

(function($) { 
    function getStock(type, complete) { 
     var defs = { 
      desc: false, 
      baseURL: 'http://query.yahooapis.com/v1/public/yql?q=', 
      query: { 
       quotes: 'select * from yahoo.finance.quotes where symbol = "{stock}" | sort(field="{sortBy}", descending="{desc}")', 
       historicaldata: 'select * from yahoo.finance.historicaldata where symbol = "{stock}" and startDate = "{startDate}" and endDate = "{endDate}"' 
      }, 
      suffixURL: { 
       quotes: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?', 
       historicaldata: '&env=store://datatables.org/alltableswithkeys&format=json&callback=?' 
      } 
     }; 

     var query = defs.query[type] 
     .replace('{stock}', $("#inputSymbol").val()) 
     .replace('{sortBy}', defs.sortBy) 
     .replace('{desc}', defs.desc) 
     .replace('{startDate}', $("#startDate").val()) 
     .replace('{endDate}', $("#endDate").val()) 

     var url = defs.baseURL + query + (defs.suffixURL[type] || ''); 
     $.getJSON(url, function(data) { 
      var err = null; 
      if (!data || !data.query) { 
       err = true; 
      } 
      complete(err, !err && data.query.results); 
      //alert(data.query.results); 

      //loop object by keys 
      var textCsv = ""; 
      var tempData = data.query.results.quote; 
      var dataCsv = "Date,Close\n" 
      for (var key in tempData) { 
       dataCsv += tempData[key].Date; 
       dataCsv += ","; 
       dataCsv += tempData[key].Close; 
       dataCsv += "\n"; 
      } 
      g = new Dygraph(document.getElementById("graphdiv"), dataCsv); 

     }); 
    } 

    window.getStock = getStock; 
})(jQuery);

來源

2014-02-25 22:06:03 lcazarre

Javascript：如何從這個JSON數據集中繪製圖表？

回答

相關問題