如何显示谷歌条形图，而不是仅显示数据表？答案

【问题标题】：How to display a google bar chart, instead of data table only?如何显示谷歌条形图，而不是仅显示数据表？
【发布时间】：2016-08-15 12:20:00
【问题描述】：

这是asp.net编码网站页面编码页面在这里我插入JavaScript并通过ID检索数据只是我只设置了身高和体重

<h1 class="style2"> Channeling Paid and UnPaid Monthly</h1>

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
    <asp:GridView ID="Ch_Data_Monthly" runat="server" BackColor="White" 
    BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
    </asp:GridView>

    <asp:Literal ID="ltScriptsDataMonthly" runat="server"></asp:Literal>  
    <div id="Ch_BarChart_Monthly" style="width: 900px; height: 300px;" />

这是 C# 编码。我正在通过 SQL Server R2 存储过程获取数据。

我已通过名为“connectionString”的网络配置连接我的数据库

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Data;
using System.Web.Security;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            // Monthly Bind Gridview  
            Bind_Ch_Data_Monthly();

            // Monthly Bind Charts  
            BindChart_Monthly();
        }

    }
    //Monthly Channeling Paid and UnPaid 
    private void Bind_Ch_Data_Monthly()
    {
        Ch_Data_Monthly.DataSource = GetChartDataMonthly();
        Ch_Data_Monthly.DataBind();
    }


    private void BindChart_Monthly()
    {
        DataTable dsChartDataMonthly = new DataTable();
        StringBuilder strScriptDataMonthly = new StringBuilder();

        try
        {
            dsChartDataMonthly = GetChartDataMonthly();

            strScriptDataMonthly.Append(@"<script type='text/javascript'>  
                     google.charts.load('visualization', '1', {packages: ['bar']});
                       google.charts.setOnLoadCallback(drawChart);</script>  
                    <script type='text/javascript'>  
                    function drawChart() {   
                    var data = google.visualization.arrayToDataTable([  
                    ['Months', 'Paid', 'UnPaid'],");

            foreach (DataRow row in dsChartDataMonthly.Rows)
            {
                strScriptDataMonthly.Append("['" + row["Months"] + "'," + row["Paid"] + "," + row["UnPaid"] + "],");
            }
            strScriptDataMonthly.Remove(strScriptDataMonthly.Length - 1, 1);
            strScriptDataMonthly.Append("]);");
            strScriptDataMonthly.Append("var options = {chart: {title: 'Company Performance',subtitle: 'Sales, Expenses, and Profit: 2014-2017',}};");
            strScriptDataMonthly.Append("var chart = new google.charts.Bar(document.getElementById(document.getElementById('Ch_BarChart_Monthly'));  chart.draw(data, options); } google.setOnLoadCallback(drawChart)");
            strScriptDataMonthly.Append(" </script>");

            ltScriptsDataMonthly.Text = strScriptDataMonthly.ToString();
        }
        catch
        {
        }
        finally
        {
            dsChartDataMonthly.Dispose();
            strScriptDataMonthly.Clear();
        }
    }

    /// <summary>  
    /// fetch data from mdf file saved in app_data  
    /// </summary>  
    /// <returns>DataTable</returns>  
    private DataTable GetChartDataMonthly()
    {
        DataSet dsData = new DataSet();
        try
        {
            SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);
            SqlDataAdapter sqlCmd = new SqlDataAdapter("DSB_Ch_MonthWise_Paid&UnPaid", sqlCon);
            sqlCmd.SelectCommand.CommandType = CommandType.StoredProcedure;

            sqlCon.Open();

            sqlCmd.Fill(dsData);

            sqlCon.Close();
        }
        catch
        {
            throw;
        }
        return dsData.Tables[0];

    }

}

【问题讨论】：

标签： c# asp.net sql-server-2008-r2 google-visualization

【解决方案1】：

只需要一个document.getElementById

替换这个...

var chart = new google.charts.Bar(document.getElementById(document.getElementById('Ch_BarChart_Monthly'));  chart.draw(data, options); } google.setOnLoadCallback(drawChart)

有了这个……

var chart = new google.charts.Bar(document.getElementById('Ch_BarChart_Monthly'));  chart.draw(data, options); } google.setOnLoadCallback(drawChart);

【讨论】：

【解决方案2】：

请修复此行并尝试

document.getElementById(document.getElementById('Ch_BarChart_Monthly'))

【讨论】：

【解决方案3】：

试试这个

document.getElementById('Ch_BarChart_Monthly')); 
     chart.draw(data, options); 
     google.setOnLoadCallback(drawChart)

【讨论】：