ASP.NET MVC：饼图不显示

Posted 2023-04-18

【中文标题】ASP.NET MVC：饼图不显示

【英文标题】：ASP.NET MVC : pie doesn't display

【发布时间】：2021-12-14 04:19:56

【问题描述】：

我正在尝试在 ASP.NET MVC 的 SQL Server 中使用 SyncFusion 绑定创建一个饼图，但是该图表不显示，当我重建代码并且它运行但没有图表显示时没有发现错误消息。我想知道图表无法加载的原因是什么

我尝试使用此代码将 Syncfusion 饼图连接到 SQL Server

string command2 = "SELECT * FROM [myTable] WHERE Item_ID < 10";

SqlCommand cmd1 = new SqlCommand(command2, con);
adapter.SelectCommand = cmd1;
adapter.Fill(dataset);

for (var i = 0; i < dataset.Tables[0].Rows.Count; i++)

    int x1 = (int)Convert.ToInt32(dataset.Tables[0].Rows[i]["this.Item_ID"]);
    int y1 = (int)Convert.ToInt32(dataset.Tables[0].Rows[i]["Item_Score"]);

    data.Add(new ChartSqlData(x1, y1));

CShtml 视图：

 @(Html.EJS().AccumulationChart("container")

.Series(sr =>

 

 sr.Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)

.XName("Item_ID")

.YName("Item_Score")

.Name("Item_ID")

.Explode(true)

.DataLabel(dl => dl.Visible(true).Name("Item_ID").Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside).ConnectorStyle(cs => cs.Type(Syncfusion.EJ2.Charts.ConnectorType.Line).Length("5 %")).Font(ft => ft.Size("14px")))

.Animation(animate => animate.Enable(true))

.Radius("70%")

.StartAngle(0)

.EndAngle(360)

.InnerRadius("0%")

.GroupTo("9")

.GroupMode(Syncfusion.EJ2.Charts.GroupModes.Point)

.DataSource(ViewBag.dataSource).Add();

 )

控制器：

List<ChartSqlData> data = new List<ChartSqlData>();

string connectionString = null;

SqlDataAdapter adapter = new SqlDataAdapter();
DataSet dataset = new DataSet();

connectionString = @"Data Source=LAPTOP-V3QJAMBF\SQLEXPRESS;Initial Catalog=My_Database;Integrated Security=True;";

SqlConnection con = new SqlConnection(connectionString);

con.Open();

string command2 = "SELECT * FROM [myTable] WHERE Item_ID < 10";

SqlCommand cmd1 = new SqlCommand(command2, con);

adapter.SelectCommand = cmd1;
adapter.Fill(dataset);

for (var i = 0; i < dataset.Tables[0].Rows.Count; i++)

    int x1 = (int)Convert.ToInt32(dataset.Tables[0].Rows[i]["this.Item_ID"]);
    int y1 = (int)Convert.ToInt32(dataset.Tables[0].Rows[i]["Item_Score"]);

    data.Add(new ChartSqlData(x1, y1));


ViewBag.dataSource = data;

return View();


[Serializable]
public class ChartSqlData

    public ChartSqlData(int xvalue, int yvalue1)
    
        this.Item_ID = xvalue;
        this.Item_Score = yvalue1;
    

    public int  Item_ID  get; set; 
    public int Item_Score  get; set; 

【参考方案1】：

这是因为在控件创建结束时尚未调用 Render 方法。我已根据您的需要添加并准备了样本。请检查下面的 sn-p 和示例。

@(Html.EJS().AccumulationChart("container").Render())

示例：https://www.syncfusion.com/downloads/support/directtrac/general/ze/PieDB1343192459.zip