Google可视化barChart在绑定到数据表后不可见

问题描述

I have a problem with google visualization BarChart, at first it was visible before I binded it to the Datatable. Now its not visible and when debugging my code the data table has the rows and data. Please Help I believe i have followed the example as it is here

Below its my aspx page where my bar chart is aligned :
<pre lang="HTML">
<td>
             <div>
            <asp:Literal ID="lt" runat="server"></asp:Literal>
             </div>
            <div id="chart_div" style="width: 550px; height: 400px;"></div>
        </td>

这是我的.CS页面：

Here is my .CS page :

  protected void Page_Load(object sender, EventArgs e)
    {
       if (Page.IsPostBack == false)
         {
           BindBarChart();
         }
    }

private DataTable GetBarData()
{
    DataTable dt = new DataTable();
    using (SqlConnection conn = new   SqlConnection(Application_Info.CompanyConnection()))
    {
            string cmd = "select ID, ClientName from Company with(nolock)"
            SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
            adp.Fill(dt);
            return dt;
    }
}

    private void BindBarChart()
{
    StringBuilder str = new StringBuilder();
    DataTable dt = new DataTable();

    try
    {
        dt = GetBarData();
        str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});
                   google.setOnLoadCallback(drawChart);

                    function drawChart() {
                    var data = new google.visualization.DataTable();
                    data.addColumn('number', 'Number');
                    data.addColumn('string', 'ClientName');
                    data.addRows(" + dt.Rows.Count + ");");

        for (int i = 0; i <= dt.Rows.Count - 1; i++)
        {
            str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["Number"].ToString() + "');");
            str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["ClientName"].ToString() + ") ;");
        }

        str.Append("var chart = new google.visualization.BarChart(document.getElementById('chart_div'));");
        str.Append("chart.draw(data, {title:'Report', titleTextStyle:{color: 'Blue'},");
        str.Append("vAxis: { title: 'Client', titleTextStyle: { color: 'red' } }");
        str.Append("}); }");
        str.Append("</script>");
        lt.Text = str.ToString().TrimEnd(',').Replace('*', '"');
    }
    catch { }
}

推荐答案

这篇关于Google可视化barChart在绑定到数据表后不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！