ChartJS 在图表中按数据显示SQL Server分组

s4n0splo  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(181)

我在做一个图表项目。它可以是Chartjs.org或谷歌图表。
我可以从SQL Server中检索数据并在网格视图中显示它。我的问题是,我如何直接在条形图中显示这些数据。从SQL Server检索的数据按条件分组。如果可以使用API,请给予我一些代码。

qeeaahzv

qeeaahzv1#

使用DataTable将下面的代码添加到c#中,并将其分配给

<div class="card-body">                           
<asp:Literal ID="ltScripts" runat="server"></asp:Literal>  
<div id="piechart_3d" style="width: 465px; height: 400px;">            
</div>

C#代码:

DataTable dsChartData = new DataTable();
            StringBuilder strScript = new StringBuilder();
            try
            {
                dsChartData = GetChartData();
                strScript.Append(@"<script type='text/javascript'>  
                    google.load('visualization', '1', {packages: ['corechart']}); </script>  
                      
                    <script type='text/javascript'>  
                     
                    function drawChart() {         
                    var data = google.visualization.arrayToDataTable([  
                    ['Priority', 'Total'],");

                foreach (DataRow row in dsChartData.Rows)
                {
                    strScript.Append("['" + row["Priority"] + "'," + row["Total"] + "],");
                }
                strScript.Remove(strScript.Length - 1, 1);
                strScript.Append("]);");

                strScript.Append(@" var options = {     
                                           
                                    is3D: true,          
                                    };   ");

                strScript.Append(@"var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));          
                                chart.draw(data, options);        
                                }    
                            google.setOnLoadCallback(drawChart);  
                            ");
                strScript.Append(" </script>");
                ltScripts.Text = strScript.ToString();
            }
            catch
            {
            }
            finally
            {
                dsChartData.Dispose();
                strScript.Clear();
            }

相关问题