Morris圖表不顯示來自外部URL的數據

我有一個Morris圖表，我嘗試使用它從外部源獲取數據，在這種情況下是一個aspx頁面。但是圖表根本不顯示。唯一顯示的圖表是我向靜態數據添加到myfirstchart的那個圖表。Morris圖表不顯示來自外部URL的數據

任何人都可以看到我缺少的東西嗎？

圖表頁面：

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

來源

2016-02-28 MTplus

使用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); ; 
}

而且更新JavaScript一起將WebMethod 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; 
}

來源

2016-02-29 16:58:25 krlzlx

NIce，謝謝你的解決方案！ – MTplus

Morris圖表不顯示來自外部URL的數據

回答

相關問題