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

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

我已经连接通过Web配置我的数据库名为 “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]; 

    } 

}

来源

2016-08-15 user2635325

只需要一个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);

来源

2016-08-15 12:35:37 WhiteHat

请修复这条线，并尝试

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

来源

2016-08-15 12:22:48 Adrian

试试这个

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

来源

2018-02-27 05:37:37 user2635325

答案应该是格式化的和可以理解的 –

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

回答

相关问题