用Ajax和Json填充JQuery浮動圖表

Question

我想在我的MVC 5應用程序中使用JQuery浮動圖表http://www.flotcharts.org/。目前我只是想了解他們是如何工作的。我用它創建了一個條形圖此示例代碼：

$(document).ready(function() { 

    $(function() { 

    var data = [[0, 5],[1, 10],[2, 15],[3, 20],[4, 25],[5, 30]]; 
    var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }]; 
    var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"],[4, "Beijing"], [5, "Sydney"]]; 

    var options = { 
     series: { 
      bars: { 
       show: true 
      } 
     }, 
     bars: { 
      align: "center", 
      barWidth: 0.5 
     }, 
     xaxis: { 
      axisLabel: "World Cities", 
      axisLabelUseCanvas: true, 
      axisLabelFontSizePixels: 12, 
      axisLabelFontFamily: 'Verdana, Arial', 
      axisLabelPadding: 10, 
      ticks: ticks 
     }, 

     legend: { 
      noColumns: 0, 
      labelBoxBorderColor: "#000000", 
      position: "nw" 
     }, 
     grid: { 
      hoverable: true, 
      borderWidth: 2, 
      backgroundColor: { colors: ["#ffffff", "#EDF5FF"] } 
     } 
    }; 

     $.plot($("#placeholder"), dataset, options); 
    }); 

}); 

如果我使用jQuery海軍報圖表，我需要能夠通過AJAX拉在動態的數據，而不是被硬編碼進入我的剃刀視圖像上面一樣。

我創造了我的控制器的行動返回相同的數據作爲硬編碼到上面的例子中

[HttpGet] 
public ActionResult GetTestData() 
{ 
    return Json(new[] { new[] { 0, 5 }, new[] { 1, 10 }, new[] { 2, 15 }, new[] { 3, 20 }, new[] { 4, 25 }, new[] { 5, 30 }, new[] { 6, 35 } },JsonRequestBehavior.AllowGet); 
} 

我然後註釋掉數據修正我的Razor視圖代碼和情節調用和更換他們有一個Ajax請求

//var data = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]]; 
//$.plot($("#placeholder"), dataset, options); 
$.ajax({ 
      type: "GET", 
      url: '@Url.Action("GetTestData")', 
      error: function() { 
       alert("An error occurred."); 
      }, 
      success: function (data) { 
       $.plot($("#placeholder"), dataset, options); 
      } 
     }); 

這Ajax請求則應該叫我控制器的GetTestData行動並返回JSON數據。然而，我在我的GetTestData Action上放了一個斷點，調試過了，並且Action永遠不會被調用，因此數據永遠不會返回以創建條形圖。

任何人都可以請幫我找出爲什麼我的Action沒有被我的Ajax代碼調用。

感謝您的任何反饋意見。

Answer 1

夥計們，問題是，代碼

var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }]; 

行是我的Ajax調用之外。這意味着在這行代碼中，變量data正在分配，但它不存在。

因此，解決方案是移動Ajax調用成功函數內部的海軍報圖具體的代碼，像這樣

$.ajax({ 
      type: "GET", 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      url: '/Statistics/GetTestData/', 
      error: function() { 
       alert("An error occurred."); 
      }, 
      success: function (data) { 
       //alert("Success."); 

       var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }]; 
       var ticks = [[0, "London"], [1, "New York"], [2, "New Delhi"], [3, "Taipei"], [4, "Beijing"], [5, "Sydney"]]; 

       var options = { 
        series: { 
         bars: { 
          show: true 
         } 
        }, 
        bars: { 
         align: "center", 
         barWidth: 0.5 
        }, 
        xaxis: { 
         axisLabel: "World Cities", 
         axisLabelUseCanvas: true, 
         axisLabelFontSizePixels: 12, 
         axisLabelFontFamily: 'Verdana, Arial', 
         axisLabelPadding: 10, 
         ticks: ticks 
        }, 

        legend: { 
         noColumns: 0, 
         labelBoxBorderColor: "#000000", 
         position: "nw" 
        }, 
        grid: { 
         hoverable: true, 
         borderWidth: 2, 
         backgroundColor: { colors: ["#ffffff", "#EDF5FF"] } 
        } 
       }; 

       $.plot($("#placeholder"), dataset, options); 
      } 
     }); 

希望這可以幫助其他人。

Answer 2

我只是來跟http://www.jqueryflottutorial.com/how-to-make-jquery-flot-ajax-update-chart.html

，如果我想，如果我有我的本地JSON數據來看看我的代碼

function GetData() { 
    $.ajaxSetup({ cache: false }); 

    $.ajax({ 
     url: "data.json", 
     dataType: 'json', 
     success: update, 
     error: function() { 
      setTimeout(GetData, updateInterval); 
     } 
    }); 
} 

data.json

{ 
"cpu":10, 
"core":30, 
"disk":50 
} 

更新圖表想要在json文件中添加更多的數據，它不會顯示輸出。在json文件中有沒有什麼辦法讓圖表動態生成更多的數據呢？

{ 
"cpu":70, 
"core":20, 
"disk":10 
}, 
{ 
"cpu":90, 
"core":20, 
"disk":80 
}, 
{ 
"cpu":50, 
"core":10, 
"disk":60 
} 

Answer 3

這個例子可能有幫助。如何改變簡單的jQuery海軍報圖使用Ajax： Receive data via AJAX with jQuery Flot