Question

我正在尝试在我的MVC 5应用程序中使用JQuery Flot Charts 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 Flot Charts，我需要能够通过AJAX动态提取数据，而不是像上面那样硬编码到我的Razor View中。

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

[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);
}

然后，我通过注释掉数据并绘制调用并用Ajax请求替换它们来修改我的Razor View中的代码

//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请求应调用Controller中的GetTestData Action并返回Json数据。但是，我在我的GetTestData Action上设置了一个断点，调试了，而且Action永远不会被调用，因此永远不会返回数据来创建条形图。

有没有人可以帮我找出为什么我的Ajax代码没有调用我的Action。

感谢您的反馈。

Answer 1

伙计们，问题在于代码行

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

不在我的Ajax Call中。这意味着在这行代码中，变量data被分配，但它不存在。

因此，解决方案是将Flot Chart特定代码移到Ajax Call的成功函数中，如此

$.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

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

用Ajax和Json填充JQuery Flot Chart

3 个答案: