Question

我目前正在使用ASP和C＃开发的网站上使用条形图。条形图是使用Google Charts开发的。从DB检索条形图的值。我可以设法显示条形图而没有正确的值问题。现在，客户端需要一个下拉列表，用户可以从中选择项目。应根据所选项目显示条形图。

例如，如果用户选择零售，则应在页面上显示包含该数据的图表。

要将图表放在一起，我的代码如下;

private void BindChart()
{
    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([  
                ['Course', 'Progression'],");

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

        strScript.Append(@" var options = {     
                                hAxis: {
                                viewWindow: {
                                min: 0,
                                max: 100
                                },
                                ticks: [0, 25, 50, 75, 100],
                                },
                                title: 'My Progression (%)'      
                                };   ");

        strScript.Append(@"var chart = new google.visualization.BarChart(document.getElementById('barchart'));          
                            chart.draw(data, options);        
                            }    
                        google.setOnLoadCallback(drawChart);  
                        ");
        strScript.Append(" </script>");

        ltScripts.Text = strScript.ToString();
    }
    catch
    {
    }
    finally
    {
        dsChartData.Dispose();
        strScript.Clear();
    }
}

要从DB获取值，我的代码如下;

private DataTable GetChartData()
{
    string UsrName = User.Identity.Name;
    DataSet dt = new DataSet();
    try
    {
        using (SqlConnection conn = new SqlConnection(Common.ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT Progression,Course FROM Messages where UserName=@UserName"))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    SqlParameter para2 = new SqlParameter("UserName", UsrName);
                    cmd.Parameters.Add(para2);
                    cmd.Connection = conn;
                    sda.SelectCommand = cmd;
                    sda.Fill(dt);

                    DropDownList1.DataSource = dt;
                    DropDownList1.DataTextField = "Course";
                    DropDownList1.DataBind();
                }
            }
            DropDownList1.Items.Insert(0, new ListItem("Select your course"));
        }
    }
    catch (Exception)
    {
    }
    return dt.Tables[0];
}

如果我使用下面的代码，它第一次工作，但之后它不会填充图表。 BindChart1与BindChart完全相同。它只是document.getElementById('barchart1')而不是document.getElementById('barchart')

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (DropDownList1.SelectedIndex == 1)
    {
        BindChart1()
    }
    else{
        BindChart();
    }
}

提前感谢您的所有帮助和支持。

enter image description here

Answer 1

不是单独手动操作 - 你看过仪表板控件吗？它们允许您使用图形和表格或滑块等从客户端动态更改数据可视化，而不是执行服务器回发以生成javascript。

以下是手册中的页面：google charts api link

根据下拉列表中的选定项目显示条形图

1 个答案: