用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