如何从sql填充morris甜甜圈图表中的数据？

本文介绍了如何从sql填充morris甜甜圈图表中的数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ < script type = text / javascript> $（ document ）。ready（ function （）{ 调试器; / * MORRIS DONUT CHART ---------------------------------------- * / Morris.Donut（{元素：' morris-donut-chart'，数据：[{ label： Arun， value： 27000 }，{ label： Saumya，值： 5500 }，{ label： Nilesh，值： 5500 }，{ label： Tejas，值： 5500 }，{ label： Raj， value： 27000 }]，调整大小： true }）; }）; < / script> 这是我想从数据库带来的数据，请建议 以下是我到目前为止所尝试的 [WebMethod] public static列表与LT; ChartDetails> GetPiechartData（） { using（SqlConnection con = new SqlConnection（ApConfig.GetConectionString）） { SqlCommand cmd = new SqlCommand（Usp_Getdata，con）; cmd.CommandType = CommandType.StoredProcedure; SqlDataAdapter da = new SqlDataAdapter（）; da.SelectCommand = cmd; DataTable dt = new DataTable（）; da.Fill（dt）; List< ChartDetails> dataList = new List< ChartDetails>（）; foreach（dt.Rows中的DataRow dtrow） { ChartDetails details = new ChartDetails（）; details.PlanName = dtrow [0] .ToString（）; details.PaymentAmount = Convert.ToInt32（dtrow [1]）; dataList.Add（详情）; } 返回dataList; } } 和剧本 < script 类型 = text / javascript > $（function（）{ debugger; $ .ajax（$ b） $ b {类型：'POST'， dataType：'json'， contentType：'application / json'， url：'Home.aspx / GetPiechartData'，数据：'{}'，成功：函数（响应）{ Morris.Donut（{元素：'donut-example'，数据：响应}）; }， 错误：function（）{ alert（加载数据时出错！请尝试aga在。）; } }）; }） < / script > < div class = col-md-3 col-sm-12 col-xs-12 > < div class = 面板 - 默认 > < div class = panel-heading > 圆环图示例 < / div > < div class = panel-body > < div id = morris-donut-chart > < / div > ; < / div > < / div > < / div > 解决方案 （ document ）。ready（ function （）{ 调试器; / * MORRIS DONUT CHART ------------- --------------------------- * / Morris.Donut（{元素：' morris-donut-chart'， data：[{ label： Arun， value： 27000 }，{ label： Saumya，值： 5500 }，{ label： Nilesh，值： 5500 }，{ label： Tejas，值： 5500 }，{ label： Raj，值： 27000 }]，调整大小： true }）; }）; < / script> 这是我想从数据库带来的数据，请建议 以下是我到目前为止所尝试的 [WebMethod] public static列表与LT; ChartDetails> GetPiechartData（） { using（SqlConnection con = new SqlConnection（ApConfig.GetConectionString）） { SqlCommand cmd = new SqlCommand（Usp_Getdata，con）; cmd.CommandType = CommandType.StoredProcedure; SqlDataAdapter da = new SqlDataAdapter（）; da.SelectCommand = cmd; DataTable dt = new DataTable（）; da.Fill（dt）; List< ChartDetails> dataList = new List< ChartDetails>（）; foreach（dt.Rows中的DataRow dtrow） { ChartDetails details = new ChartDetails（）; details.PlanName = dtrow [0] .ToString（）; details.PaymentAmount = Convert.ToInt32（dtrow [1]）; dataList.Add（详情）; } 返回dataList; } } 和剧本 < script 类型 = text / javascript > （function（）{ debugger; .ajax（ {类型：'POST'， dataType：'json'， contentType：'application / json'， url：'Home.aspx / GetPiechartData'， data：'{}'， success：function（response）{ Morris.Donut（{ element：'donut -example'， data：response }）; }， error：function（）{ alert（加载数据时出错！请再试一次。）; } }）; }） < / script > < div class = col-md-3 col-sm-12 col-xs-12 > < div class = 面板 - 默认 > < div class = panel-heading > 圆环图示例 < / div > < div class = panel-body > < div id = morris-donut-chart > < / div > < / div > < / div > < / div > Hi ,<script type="text/javascript"> $(document).ready(function () { debugger; /* MORRIS DONUT CHART ----------------------------------------*/ Morris.Donut({ element: 'morris-donut-chart', data: [{ label: "Arun", value: 27000 }, { label: "Saumya", value: 5500 }, { label: "Nilesh", value: 5500 }, { label: "Tejas", value: 5500 }, { label: "Raj", value: 27000 }], resize: true }); });</script>this is the data i want to bring from database , please suggestbelow is what i have tried so far[WebMethod]public static List<ChartDetails> GetPiechartData(){ using (SqlConnection con = new SqlConnection(ApConfig.GetConectionString)) { SqlCommand cmd = new SqlCommand("Usp_Getdata", con); cmd.CommandType = CommandType.StoredProcedure; SqlDataAdapter da = new SqlDataAdapter(); da.SelectCommand = cmd; DataTable dt = new DataTable(); da.Fill(dt); List<ChartDetails> dataList = new List<ChartDetails>(); foreach (DataRow dtrow in dt.Rows) { ChartDetails details = new ChartDetails(); details.PlanName = dtrow[0].ToString(); details.PaymentAmount = Convert.ToInt32(dtrow[1]); dataList.Add(details); } return dataList; }}and on script<script type="text/javascript"> $(function () { debugger; $.ajax( { type: 'POST', dataType: 'json', contentType: 'application/json', url: 'Home.aspx/GetPiechartData', data: '{}', success: function (response) { Morris.Donut({ element: 'donut-example', data: response }); }, error: function () { alert("Error loading data! Please try again."); } }); })</script><div class="col-md-3 col-sm-12 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> Donut Chart Example </div> <div class="panel-body"> <div id="morris-donut-chart"></div> </div> </div></div> 解决方案 (document).ready(function () { debugger; /* MORRIS DONUT CHART ----------------------------------------*/ Morris.Donut({ element: 'morris-donut-chart', data: [{ label: "Arun", value: 27000 }, { label: "Saumya", value: 5500 }, { label: "Nilesh", value: 5500 }, { label: "Tejas", value: 5500 }, { label: "Raj", value: 27000 }], resize: true }); });</script>this is the data i want to bring from database , please suggestbelow is what i have tried so far[WebMethod]public static List<ChartDetails> GetPiechartData(){ using (SqlConnection con = new SqlConnection(ApConfig.GetConectionString)) { SqlCommand cmd = new SqlCommand("Usp_Getdata", con); cmd.CommandType = CommandType.StoredProcedure; SqlDataAdapter da = new SqlDataAdapter(); da.SelectCommand = cmd; DataTable dt = new DataTable(); da.Fill(dt); List<ChartDetails> dataList = new List<ChartDetails>(); foreach (DataRow dtrow in dt.Rows) { ChartDetails details = new ChartDetails(); details.PlanName = dtrow[0].ToString(); details.PaymentAmount = Convert.ToInt32(dtrow[1]); dataList.Add(details); } return dataList; }}and on script<script type="text/javascript">(function () { debugger;.ajax( { type: 'POST', dataType: 'json', contentType: 'application/json', url: 'Home.aspx/GetPiechartData', data: '{}', success: function (response) { Morris.Donut({ element: 'donut-example', data: response }); }, error: function () { alert("Error loading data! Please try again."); } }); })</script><div class="col-md-3 col-sm-12 col-xs-12"> <div class="panel panel-default"> <div class="panel-heading"> Donut Chart Example </div> <div class="panel-body"> <div id="morris-donut-chart"></div> </div> </div></div> 这篇关于如何从sql填充morris甜甜圈图表中的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！