我想在饼图中显示下表中的俱乐部名称和 child 人数
这是我创建的 PieChart Web 表单的后台代码:
public partial class PieChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
string club_name;
int no_children;
public int TargetClub_No()
{
string CS = ConfigurationManager.ConnectionStrings["dbyouthworkConnectionString"].ConnectionString;
using (MySqlConnection con = new MySqlConnection(CS))
{
MySqlCommand cmd = new MySqlCommand("SELECT no_children, club_name FROM pie_chart WHERE club_name = 'Target Club'", con);
con.Open();
MySqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
club_name = rdr["club_name"].ToString();
no_children = Convert.ToInt32(rdr["no_children"]);
}
return no_children;
}
}
}
我已经下载了js.chart文件和jquery文件
这是我创建的 PieChart.aspx 文件中的代码:
<body>
<form id="form1" runat="server">
<canvas id="mycanvas" width="256" height="256"></canvas>
<script>
$(document).ready(function () {
var ctx = $("#mycanvas").get(0).getContext("2d");
// pie chart data
var t = <% TargetClub_No(); %>;
var data = [
{
value: t,
color: "cornflowerblue",
highlight: "lightskyblue",
label: "Target Club"
},
{
value: 50,
color: "lightgreen",
highlight: "yellowgreen",
label: "Lightgreen"
},
{
value: 40,
color: "orange",
highlight: "darkorange",
label: "Orange"
}
];
//draw
var piechart = new Chart(ctx).Pie(data);
});
</script>
<div>
</div>
</form>
*在这里，我首先尝试输入目标俱乐部的 child 数量，但是当我运行代码时，我得到一个空白页面而不是饼图
使用 Chrome 中的开发工具的屏幕截图:
这表明我在调用“public int TargetClub_No()”时做错了什么
这是网络选项卡的屏幕截图:
但不确定这个选项卡的含义...
最佳答案
首先，你的 JS 中有语法错误。 这部分:
var t = '<% TargetClub_No(); %>'
//var data = [
应该看起来像这样:
var t = <%= TargetClub_No() %>;
var data = [
现在您的 C# 方法 TargetClub_No() 需要返回一个值来分配给 t。 对于您首先尝试做的事情，您想要返回目标俱乐部的 child 数量。像这样:
public int TargetClub_No()
{
...
//nothing else needs to change
...
return no_children;
}
最终，您可能希望您的方法 TargetClub_No() 以可以直接将其分配给数据的方式返回所有数据。
这里有一篇文章完全符合您的要求(甚至更多):
Chart.js Asp.net : Create Pie chart with database jQuery Ajax C#
关于javascript - 如何使用chart.js将来自mysql的数据显示为饼图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35736847/