莫里斯图表不显示来自外部URL的数据

MTplus 发表于 Dev

MTplus

我有一个莫里斯图表，我尝试使用它从外部源（在本例中为aspx页）获取数据。但是该图表根本不显示。显示的唯一图表是我向中添加静态数据的图表myfirstchart。

有人看到我想念的吗？

图表页面：

<head runat="server">
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Morris.Donut({
            element: 'morris-donut-chart',
            data: $.parseJSON(Graph()),
            resize: true
        });
    });

    function Graph() {
        var data = "";
        $.ajax({
            type: 'POST',
            url: 'data.aspx',
            dataType: 'json',
            async: false,
            contentType: "application/json; charset=utf-8",
            data: {},
            success: function (result) {
                data = result.d;
            },
            error: function (xhr, status, error) {
                alert(error);
            }
        });

        return data;
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <div id="morris-donut-chart" style="height: 250px;"></div>
<div id="myfirstchart" style="height: 250px;"></div>
</div>
</form>
<script>        
    new Morris.Line({
        // ID of the element in which to draw the chart.
        element: 'myfirstchart',
        // Chart data records -- each entry in this array corresponds to a point on
        // the chart.
        data: [
          { year: '2008', value: 20 },
          { year: '2009', value: 10 },
          { year: '2010', value: 5 },
          { year: '2011', value: 5 },
          { year: '2012', value: 20 }
        ],
        // The name of the data record attribute that contains x-values.
        xkey: 'year',
        // A list of names of data record attributes that contain y-values.
        ykeys: ['value'],
        // Labels for the ykeys -- will be displayed when you hover over the
        // chart.
        labels: ['Value']
    });
</script>

</body>

数据页：

protected void Page_Load(object sender, EventArgs e)
{
    var sb = new StringBuilder();
    sb.Append("[");
    sb.Append("  { label: '2012-10-01', value: 802 },");
    sb.Append("  { label: '2012-10-02', value: 783 },");
    sb.Append("  { label: '2012-10-03', value: 820 },");
    sb.Append("  { label: '2012-10-04', value: 839 },");
    sb.Append("  { label: '2012-10-05', value: 792 },");
    sb.Append("  { label: '2012-10-06', value: 859 },");
    sb.Append("  { label: '2012-10-07', value: 790 },");
    sb.Append("]");

    var jsonSerializer = new JavaScriptSerializer();
    string data = jsonSerializer.Serialize(sb.ToString());

    string json = data;
    Response.Clear();
    Response.ContentType = "application/json; charset=utf-8";
    Response.Write(json);
    Response.End();
}

使用WebMethod：

[WebMethod]
public static string getGraph()
{
    List<object> json = new List<object>();

    json.Add(new { label = "2012-10-01", value = 802 });
    json.Add(new { label = "2012-10-02", value = 783 });
    json.Add(new { label = "2012-10-03", value = 820 });
    json.Add(new { label = "2012-10-04", value = 839 });
    json.Add(new { label = "2012-10-05", value = 792 });
    json.Add(new { label = "2012-10-06", value = 859 });
    json.Add(new { label = "2012-10-07", value = 790 });

    List<object> jsonObject = new List<object>();

    jsonObject.Add(new { 
        graph = json
    });

    return new JavaScriptSerializer().Serialize(jsonObject); ;
}

并通过调用WebMethod更新您的javascript getGraph：

$(document).ready(function () {
    var graph = Graph();

    Morris.Donut({
        element: 'morris-donut-chart',
        data: graph[0].graph,
        resize: true
    });
});

function Graph() {
    var data = "";
    $.ajax({
        type: 'POST',
        url: 'data.aspx/getGraph',
        dataType: 'json',
        async: false,
        contentType: "application/json; charset=utf-8",
        data: {},
        success: function (result) {
            data = $.parseJSON(result.d);
        },
        error: function (xhr, status, error) {
            alert(error);
        }
    });

    return data;
}