使用Ajax和Json填充JQuery Flot图表

我试图在MVC5应用程序中使用JQuery Flot图表。目前我只是想了解它们是如何工作的。我使用了创建条形图的示例代码：

$(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);
    });

});

如果我要使用jqueryflot图表，我需要能够通过AJAX动态地拉入数据，而不是像上面那样硬编码到Razor视图中

我在我的控制器中创建了一个操作，它返回与上面示例中硬编码的数据相同的数据

[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操作上设置了一个断点，并进行了调试，该操作从未被调用，因此，为了创建条形图，永远不会返回数据

有人能帮我找出为什么我的Ajax代码没有调用我的操作吗

---

感谢您的反馈。

各位，问题是代码行

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

这不在我的Ajax调用范围之内。这意味着在这行代码中，变量

data

被赋值，但它并不存在

因此，解决方案是将特定于Flot图表的代码移动到Ajax调用的success函数中，如下所示

$.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);
            }
        });

希望这对其他人有帮助。

我只是随同来的

如果我想用本地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
} 

---

这个例子可能会有所帮助。如何使用ajax更改简单的jquery flot图表：

---

您的

成功处理程序中有一个变量名不匹配，它返回您调用
$的
数据。使用
数据集绘制
。此外，如果没有调用您的操作，
@Url.action（“GetTestData”）
是否指向正确的Url？查看javascript调试器时，在“网络类型”选项卡下，
$.ajax
请求是否被调用？它是否响应404403500…？@马克谢谢你的帮助马克。我想出了解决办法，并把它贴在下面。