1
我有一个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();
}
NIce,谢谢你的解决方案! – MTplus