從使用ajax調用獲取的數據加載圖表

我在我的應用程序之一中使用jqPlot JavaScript庫（http://www.jqplot.com/）獲取圖表和圖表。從使用ajax調用獲取的數據加載圖表

在我的應用程序中，使用這個庫的地方有5-6頁。但我想在這裏討論一個特定的案例。

對於第一頁，我正在載入3個圖表。這3個圖表的數據由數據庫表填充。

每個圖表都有不同的一組查詢。所以，每個圖表的填充數據也不同。

一旦我填充了數據，我必須先處理它，然後再將其輸入提供給圖表。

什麼是那麼問題：我現在面臨 問題是，它需要大量的時間，頁面上呈現的瀏覽器（這是安靜顯而易見的，因爲首先它會形成查詢，再火對數據庫表查詢，獲取數據，處理數據並給圖表）

我的一個朋友建議使用ajax來實現下面的東西。我非常喜歡他的解決方案。

這就是我打算做的事：

我將創建一個頁面，該頁面將加載所有需要的JS/CSS文件jqPlot庫。在那個頁面上會有3個部分，我會放一些GIF圖像，指示某個過程正在進行（如ajax-loader.gif）

頁面加載完成後，它會觸發3個Ajax調用，一次，以獲取每個圖表。

我的問題是如何從ajax-call接收的數據加載圖表？

jqplot把數據和下面的方式創建圖表（看下面的例子）

<script class="code" type="text/javascript"> 
$(document).ready(function(){ 
    var plot2 = $.jqplot ('chart2', [[3,7,9,1,4,6,8,2,5]], { 
     // Give the plot a title. 
     title: 'Plot With Options', 
     // You can specify options for all axes on the plot at once with 
     // the axesDefaults object. Here, we're using a canvas renderer 
     // to draw the axis label which allows rotated text. 
     axesDefaults: { 
     labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
     }, 
     // An axes object holds options for all axes. 
     // Allowable axes are xaxis, x2axis, yaxis, y2axis, y3axis, ... 
     // Up to 9 y axes are supported. 
     axes: { 
     // options for each axis are specified in seperate option objects. 
     xaxis: { 
      label: "X Axis", 
      // Turn off "padding". This will allow data point to lie on the 
      // edges of the grid. Default padding is 1.2 and will keep all 
      // points inside the bounds of the grid. 
      pad: 0 
     }, 
     yaxis: { 
      label: "Y Axis" 
     } 
     } 
    }); 
}); 
</script>

來源

2011-09-15 I-M-JM

只是另一個想法（這ins't的解決方案，只是一個想法如何，我會做的，如果我沒有有一個想法），我會用，提煉出來的圖表作爲圖片的PHP端庫。包含的圖片會在頁面後加載，並且不需要任何javascript（有利於向後兼容），並且您可以在任何位置包含圖形。 – Ben

請記住：如果答案解決了您的問題，請點擊答案旁邊的複選標記以「接受」答案。如果您發現答案有幫助（包括解答其他人的問題），請點擊答案的「加號」箭頭。 –

嘿你把裝載機jqplot ??? u能請上幫助......我希望把AJAX裝載機unitll圖表滿載數據.. –

由於您使用jQuery，你會使用jQuery Ajax method在頁面加載後獲取圖表數據。

在您的success函數中，您的JS代碼（在瀏覽器上）從您的服務器接收數據。獲得數據後，撥打電話$.jqplot - 傳入您剛收到的數據。

要最初顯示繁忙的gif，只需使用img元素作爲chart2 div的靜態內容，稍後將作爲圖形的容器。

一些提示：

有些瀏覽器不會在處理GIF動畫做好運行一個js程序時。因此，除了旋轉的gif之外，您可能還想嘗試一條短信（「加載圖表...」）。 - 或更新短信。例如，從「從服務器獲取圖表數據」開始，然後在調用success函數後更新爲「處理圖表數據」。
不是一次性啓動所有3個Ajax調用，而是嘗試使用success函數啓動第二個Ajax調用的第一個圖表。（除了它圖表中的數據。）

如果你有你的Ajax調用的問題，谷歌的例子，問一個單獨的問題上，所以如果你仍然有問題。

來源

2011-09-15 03:58:41

謝謝你這些技巧 –

我仍然有一些疑問。根據你的回答，一旦我有數據，我必須打電話給$ .jqplot。 $ .jqplot的第一個參數是元素名稱（在我的情況下，它將是div元素），如果再次檢查問題示例，則可以看到該元素名爲'chart2'。我是否應該在頁面上已經有該元素，或者可以在飛行中添加該元素。 –

您可以隨時添加容器元素（動態），也可以使用已經存在的容器元素（div）啓動頁面。如果您已經知道該頁面將始終包含3個圖表，那麼只需從起始html頁面中的div開始，那就更容易了。 –

從使用ajax調用獲取的數據加載圖表

回答

相關問題