Question

这是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存储过程获取数据。

我已通过名为＆＃34; connectionString＆＃34;

的网络配置连接我的数据库

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];

    }

}

Answer 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);

Answer 2

请修正此行并尝试

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

Answer 3

试试这个

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

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

3 个答案: