如何从sql填充morris甜甜圈图表中的数据？ [英] How to populate data from sql for morris donut chart ?

问题描述

< script type =  < span class =code-string> text / javascript> 
 $（ document ）。ready（ function （）{
 调试器; 
  / *   MORRIS DONUT CHART 
 ---------------------------------------- * /  
 Morris.Donut（{
元素：'  morris-donut-chart'，
数据：[{
 label：  Arun，
 value：< span class =code-digit> 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 < span class =code-keyword>>
< 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 suggest


below 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 suggest


below 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甜甜圈图表中的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！