我有以下情况。 我想在我的网页中显示一个带有数据的( donut )图。 我从网页后端的数据库中获取数据 (ASP.NET/C#)。
我正在为图表使用独立的 javascript 文件(“graph.js”):
//Donut Chart
var donut = new Morris.Donut({
element: 'sales-chart',
resize: true,
colors: ["#3c8dbc", "#f56954", "#00a65a"],
data: [
{ label: "**DATA**", value: **10** },
{label: "**DATA**", value: **30**},
{label: "**DATA**", value: **20**}
],
hideHover: 'auto'
});
有没有什么好的方法可以将数据放入 javascript 文件中? (改变DATA变量)
我知道可以将 javascript 放在我的 aspx 页面上的脚本元素中,并在那里获取我的数据:
var DataNumber = <%=DataNumber%>;
并在后端提供这些数据:
private String _dataNumber = String.Empty;
protected string DataNumber {
get {
return this._dataNumber ;
}
set {
this._dataNumber = value;
}
}
但这不是我要找的。 我真的很想为此使用一个独立的文件。
最佳答案
我更喜欢 cshtml
文件,但您可以在 ASPX
文件的隐藏 div 中呈现包含变量的序列化列表:
<div class="hidden" id="myData" data-data="<%= JsonConvert.SerializeObject(myData)%>"></div>
然后,您可以从 javascript
代码中获取此数据:
$(function() {
var data = $("#myData").data('data');
var donut = new Morris.Donut( /* do something with data */);
})
我正在使用 newtonsoft JSON.NET
进行序列化,并使用 JQuery
来解析 json 数据。
另一种解决方案是调用 Ajax
来获取数据。
编辑:
这是我在 ASP.NET
中完成的类似内容的示例:
文件donut.aspx.cs
:
// ...
protected void Page_Load(object sender, EventArgs e)
{
// edit the following line to suit your needs
var list = new List<Data>(your_data_as_list);
donut.Attributes.Add("data-donut", list)
}
// ...
文件donut.aspx
:
<script type="text/javascript" src="lib/morris.js"></script>
<!-- create a component that will be managed by C#
<div runat="server" id="donut"></div>
<!-- this will execute once the page is loaded -->
<script type="text/javascript">
jQuery(function () {
// use <%= donut.ClientID %> to get the generated Id from ASP.NET
var donutData= $("#<%= donut.ClientID %>").data("donut");
var donut = new Morris.Donut( /* do something with donutData*/);
});
</script>
关于javascript - 通过后端c#在javascript文件中设置数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36217261/