Question

我有以下jQuery代码：

$(document).ready(function () {
        var group = 'test';
        $.ajax({
            type: "POST",
            async: false,
            url: "/validate.asmx/GetGraphData",
            contentType: "application/json;",
            data: "{'groupBy': '" + group + "'}",
            dataType: 'json',
            success: function (data) {
                Plot(data.d);
            }
        });
    });

    function Plot(dataIn) {
        alert(dataIn);
        $.jqplot('chartcontainer', [[[ 'test1', 1 ], [ 'test2', 5]]],
        {
            seriesDefaults: {
                renderer: $.jqplot.PieRenderer,
                rendererOptions: {
                    showDataLabels: true
                }
            },
            legend: { show: true, location: 'e' }
        }
            );
    }

webmethod（在切割它进行测试之后）看起来像这样：

[WebMethod]
    public string GetGraphData(string groupBy)
    {
        PaymentModelDataContext db = new PaymentModelDataContext();
        var q = from Event in db.TrackingEvents
                group Event by Event.campaignID;

        //string returnJSON;
        //string returnJSON = "[";
        //foreach (var grp in q)
        //{
        //    returnJSON += "['" + grp.Key + "'," + grp.Count() + "],";
        //}

        //returnJSON += "]";


        //var ser = new JavaScriptSerializer();
        //returnJSON = ser.Serialize(q);
        //return returnJSON;
        return "[['test1' , 1],['test2' , 5]]";
    }

如果我使用相同的字符串，我将返回此处并将其作为文本放入jquery代码中，将显示该图。我在绘图功能中发出警报，数据就像我发送的那样。有什么想法吗？

谢谢！

Answer 1

使用dataRenderer

$(document).ready(function(){

    var ajaxDataRenderer = function(url, plot) {
        var ret = null;
        $.ajax({
            // have to use synchronous here, else returns before data is fetched
            async: false,
            url: url,
            dataType:'json',
            success: function(data) {
                ret = data;
            }
        });
        return ret;
    };

    var jsonurl = "/validate.asmx/GetGraphData";

    plo12 = $.jqplot('chart2', jsonurl,{
        title: 'AJAX JSON Data Renderer',
        dataRenderer: ajaxDataRenderer,
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            rendererOptions: {
                showDataLabels: true
            }
        },
        legend: { show: true, location: 'e' }

    });
});

Answer 2

将ajax数据放到jqPlot dataRenderer是一个选项。但它也会以您选择的方式运作。

确保数据不会被处理为字符串。

如果您的数据是"[['test1' , 1],['test2' , 5]]" arr=eval("[['test1' , 1],['test2' , 5]]")应根据您的数据生成数组。

如果您在firebug控制台上使用console.warn("[['test1' , 1],['test2' , 5]]");和console.warn(arr);，您会发现不同之处。

jqplot不显示ajax数据

2 个答案: