Question

即使我从服务器传递到客户端的数据与Flot接受的数据相同，但它没有被绘制。在我尝试解析返回的字符串JSON的行上也有错误。代码如下：

    //server_processing.aspx.cs
    [WebMethod]
    public static string GetPieData()
    {
        List<PieData> pieData = new List<PieData>();
        pieData.Add(new PieData { label = "A", data = 40 });
        pieData.Add(new PieData { label = "B", data = 40 });
        pieData.Add(new PieData { label = "C", data = 20 });

        var serializer = new JsonSerializer();
        var stringWriter = new StringWriter();
        var writer = new JsonTextWriter(stringWriter);
        writer.QuoteName = false;
        serializer.Serialize(writer, pieData);
        writer.Close();
        var json = stringWriter.ToString();
        return json;
    }

//PieData.cs
[JsonObject(MemberSerialization.OptIn)]
public class PieData
{
    [JsonProperty]
    public string label { get; set; }
    [JsonProperty]
    public int data { get; set; }
}

<%-- Charts.aspx --%>
<script type="text/javascript">
var options = { series: { pie: {show: true} } };
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "server_processing.aspx/GetPieData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            // Replace the div's content with the page method's return.
            var jsObj = [];
            //Error on the line below
            //0x800a03f6 - JavaScript runtime error: Invalid character
            jsObj.push($.parseJSON(msg.d)); // [{label:"A",data:40},{label:"B",data:40},{label:"C",data:20}] 

            $.plot($("#piechart"), jsObj, options);
        }
    });
});

我为Flot Line Chart做了同样的事情，它运作得很好。有人可以请我指出我出错的地方吗？

Answer 1

我发现了问题。我注释掉了之前的代码，并插入了新代码，以使差异显而易见。

<script type="text/javascript">
var options = { series: { pie: {show: true} } };
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "server_processing.aspx/GetPieData",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            //var jsObj = [];
            //jsObj.push($.parseJSON(msg.d));
            var data = ($.parseJSON(msg.d);
            $.plot($("#piechart"), data, options);
        }
    });
});
</script>

//server_processing.aspx.cs
    [WebMethod]
    public static string GetPieData()
    {
        List<PieData> pieData = new List<PieData>();
        pieData.Add(new PieData { label = "A", data = 40 });
        pieData.Add(new PieData { label = "B", data = 40 });
        pieData.Add(new PieData { label = "C", data = 20 });

        JavaScriptSerializer js = new JavaScriptSerializer();
        string returnArray = js.Serialize(pieData);
        return returnArray;

        //var serializer = new JsonSerializer();
        //var stringWriter = new StringWriter();
        //var writer = new JsonTextWriter(stringWriter);
        //writer.QuoteName = false;
        //serializer.Serialize(writer, pieData);
        //writer.Close();
        //var json = stringWriter.ToString();
        //return json;
    }

因为，我正在将已解析的数据推送到已初始化的数组中。似乎数据被推送到第一个索引上，这是Flot pie的不可接受的格式，因此屏幕上没有饼图。请随时纠正我的解释。

序列化Flot Pie兼容性的数据

1 个答案: