谷歌圖表不顯示

Question

請確定爲什麼這些圖表不顯示。此代碼正在與另一個項目合作。我在一個新項目中使用了相同的代碼，我只添加了母版頁，但現在沒有顯示圖表。

我只能看到一個空白背景。

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", { packages: ["corechart"] }); 
     google.load('visualization', '1', {packages: ['table']}); 
     google.load('visualization', '1.0', {'packages':['controls']}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 

      var dataValues = JSON.parse(document.getElementById("ChartData").value); 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Locality'); 
      data.addColumn('number', 'Frequency'); 

      for (var i = 0; i < dataValues.length; i++) { 
       data.addRow([dataValues[i].location,dataValues[i].frequency]); 
      } 

      // Create a dashboard. 
      var dashboard = new google.visualization.Dashboard(
      document.getElementById('dashboard_div')); 

      // Create a range slider, passing some options 
      var donutRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'filter_div', 
      'options': { 
      'filterColumnLabel': 'Frequency' 
      } 
      }); 

      var pieoptions = { 'title': 'Pie Chart Test', 
      'width': 900, 
      'height': 500, 
      backgroundColor: 'transparent', 
      is3D: true 
      }; 

      var columnoptions = { 
      title: 'Column Chart Test', 
      hAxis: {title: 'Locality', titleTextStyle: {color: 'black'}} 
      }; 

      // Create a pie chart, passing some options 
      var pieChart = new google.visualization.ChartWrapper({ 
      'chartType': 'PieChart', 
      'containerId': 'chart_div', 
      'options': { 
      'width': 300, 
      'height': 300, 
      'pieSliceText': 'value', 
      'legend': 'right' 
      } 
      }); 

      var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
      chart.draw(data, pieoptions); 

      var chart = new google.visualization.ColumnChart(document.getElementById('columnchart')); 
      chart.draw(data, columnoptions); 

      var table = new google.visualization.Table(document.getElementById('table_div')); 
      table.draw(data, {showRowNumber: true}); 

      dashboard.bind(donutRangeSlider, pieChart); 

      // Draw the dashboard. 
      dashboard.draw(data); 
     } 
    </script> 
</asp:Content> 

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 

     <asp:Button id="b1" Text="Draw Charts" onclick="Button1_Click" runat="server" /> 
     <asp:HiddenField runat="server" ID="ChartData" /> 
     <div id="piechart" style="width: 900px; height: 500px;"></div> 
     <div id="columnchart" style="width: 900px; height: 500px;"></div> 
     <div id="table_div" style="width: 400px; height: 400px"></div> 
     <!--Div that will hold the dashboard--> 
     <div id="dashboard_div"> 
     <!--Divs that will hold each control and chart--> 
     <div id="filter_div"></div> 
     <div id="chart_div"></div> 
     </div> 
    </asp:Content> 


<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"> 

</asp:Content> 

代碼隱藏

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Script.Serialization; 

public partial class _Default : System.Web.UI.Page 
{ 

    protected void Page_Load(object sender, EventArgs e) 
    { 

    } 

    //This is a method for testing, it is called from the button and then calls a method from the Utility class. 
    public List<Items> getChartData() 
    { 
     List<Items> dataList = new List<Items>(); 
     dataList.Add(new Items("A", 110)); 
     dataList.Add(new Items("B", 120)); 
     dataList.Add(new Items("C", 30)); 
     dataList.Add(new Items("D", 150)); 
     dataList.Add(new Items("E", 210)); 
     dataList.Add(new Items("F", 310)); 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 

     this.ChartData.Value = jss.Serialize(dataList); 

     return dataList; 
    } 

    protected void Button1_Click(object sender, EventArgs e) 
    { 
     getChartData(); 
    } 
} 

public class Items 
{ 
    public string location = ""; 
    public int frequency = 0; 

    public Items(string location, int frequency) 
    { 
     this.location = location; 
     this.frequency = frequency; 
    } 
} 

幫助的例子實在是讚賞。

Answer 1

嘗試在客戶端查看源代碼。 Asp.net預先安裝了它們的Asp.net容器名稱，所以當你在客戶端運行時，你的JSON.Parse（和其他可能的字段）不一定有你認爲他們做的id。

查看this blog post的詳細說明。你可能需要改變某些事情是這樣的：

<asp:HiddenField runat="server" ID="ChartData" ClientIDMode="Predictable" /> 

我不知道，如果這是你的問題，但這樣做一個簡單的「查看源代碼」在Web瀏覽器和檢查HTML元素的ID的應告訴你這是否是問題。

Answer 2

我以前的回答是基於ASP.Net過去的麻煩的第一個直覺。進一步查看代碼後，我認爲您可能會誤用儀表板。

• 確保任何未綁定到控件的圖表都在儀表板的div之外，但圖表控件和圖表的div位於其中。
• 如果您有一個圖表綁定到使用儀表板的控件，您應該而不是對該圖表調用chart.draw()。儀表板將爲您處理該圖表的繪製。
• 您可能需要聲明您的儀表板綁定圖表google.visualization.ChartWrapper而不是google.visualization.PieChart，但我不確定這一個。

我建議現在就報廢儀表板，並在沒有它的情況下測試整個事情。儀表板比常規圖表更復雜一些。

另外，作爲一個附註，您可以通過向同一請求添加其他軟件包來加載所有的Google庫。

有關如何使用儀表板設置圖表和控件的更多信息，請參閱https://developers.google.com/chart/interactive/docs/gallery/controls#using_controls_and_dashboards。