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容器的名称来预设id，因此当您在客户端运行时，您JSON.Parse（以及可能的其他字段）不一定具有您认为他们执行的ID。

查看this blog post以获取详细说明。你可能需要改变这样的事情：

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

我不确定这是否是您的问题，但在您的网络浏览器中执行简单的“查看源代码”并检查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。

谷歌图表没有显示

2 个答案: