Question

我似乎无法找到为什么我的代码无效。 Chrome控制台中没有错误。我相信数据加载正确，不是问题。我想我可能在图表的实际创建中犯了一个错误。任何人都可以修复我的代码吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

        // Load the Visualization API and the controls package.
        google.load('visualization', '1.0', {'packages':['controls', 'corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(initialize);

        // Declare variable outside of functions.
        var data;


        function initialize() {
            var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0As-rWerCrohAdHc4M2t3T0c5c3UtOWtTUFg5RHc1VlE&usp=sharing');

            query.send(handleQueryResponse);
        }

        function handleQueryResponse(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }
            data = response.getDataTable();
            return data;
        }

        function drawDashboard() {

            var scatterRangeSlider = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'filter_div',
                'options': {
                    'filterColumnIndex': 2
                }
            });

            var scatterChart = new google.visualization.ChartWrapper({
                'chartType': 'ScatterChart',
                'containerId': 'scatter_div',
                'options': {
                    'title': '2000 MLB Teams\' Attendance vs. Wins',
                    'hAxis': {title: 'Attendance'},
                    'vAxis': {title: 'Wins'},
                    'legend': 'none'
                },
                'view': {'columns': [5, 6]}

            });

            var table = new google.visualization.ChartWrapper({
                'chartType': 'Table',
                'containerId': 'table2',
                'options': {
                    'width': '900px'
                }
            });

            var tree = new google.visualization.ChartWrapper({
                'chartType': 'Treemap',
                'containerId': 'treemap_div',
                'options': {
                    'title': 'MLB Attendance Treemap'
                },
                'view': {'columns': [1, 5]}
            });

            var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
                dashboard.bind(scatterRangeSlider, scatterChart);
                dashboard.draw(data);
        }

        google.setOnLoadCallback(initialize); 
    </script>
</head>

<body>
    <div id="dashboard_div">
        <div id="scatter_div" style="width: 1000px; height: 800px;"></div>
        <div id="filter_div"></div>
        <div id="table_div" style="width: 1000px; height: 800px;"></div>
        <div id="treemap_div" style="width: 1000px; height: 800px;"></div>  
    </div>  
</body>

Answer 1

您的图表绘图代码永远不会被调用 - 您需要从drawDashboard调用handleQueryResponse，或重新组织您的代码（因为没有明显的理由说明为什么您需要有多个不同的函数来完成此操作任务）。但是，完成后，您还需要做一些修复，因为您选择的要使用NumberRangeFilter过滤的列不是数字列（第2列是“分区”）。你的ScatterChart正在绘制“运行得分”与“允许运行”，而不是“主场比赛出勤”与“胜利”（如图表标题所暗示的那样）。表未绑定到仪表板，因此不会绘制 - 您必须将其绑定到仪表板中的一个或多个控件，或将其dataTable参数设置为data并调用其#draw 1}}无需绑定即可绘制它的方法。此外，您的数据格式不适合绘制TreeMap。如果要使用此数据集绘制TreeMap，则需要将数据集转换为合适的格式。

以下是一个如何设置它的示例（不包括TreeMap）：

function initialize() {
    var query = new google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0As-rWerCrohAdHc4M2t3T0c5c3UtOWtTUFg5RHc1VlE&usp=sharing');

    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var data = response.getDataTable();

        var scatterRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
                'filterColumnIndex': 4
            }
        });

        var scatterChart = new google.visualization.ChartWrapper({
            'chartType': 'ScatterChart',
            'containerId': 'scatter_div',
            'options': {
                'title': '2000 MLB Teams\' Attendance vs. Wins',
                'hAxis': {title: 'Attendance'},
                'vAxis': {title: 'Wins'},
                'legend': 'none'
            },
            'view': {'columns': [4, 7]}

        });

        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'table2',
            'options': {
                'width': '900px'
            }
        });

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
        dashboard.bind([scatterRangeSlider], [scatterChart, table]);
        dashboard.draw(data);
    });
}

google.load('visualization', '1.0', {'packages':['controls'], callback: initialize});

请参阅此处的工作示例：http://jsfiddle.net/asgallant/9mBn6/

Google图表工具无法加载

1 个答案: