0

我正在尝试在一个页面上加载一些谷歌图表，但是我在尝试添加第二个页面时失败了。

我正在测试新的 Google Analytics SuperProxy 功能，因此数据是从 dataSourceURL 中提取的

我的代码在下面，代码也可以正常工作，但是一旦我取消注释该部分，一切都无法加载，而且我一生都无法弄清楚如何解决这个问题。

希望有人可以提供帮助。

<html>
<head>
    <title>jmit</title>

<script type="text/javascript"
  src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","geochart"]}]}'>
</script>

<script type="text/javascript">

google.setOnLoadCallback(drawCharts);


function drawCharts(){
    /*var data1 = new google.visualization.ChartWrapper({
        "containerId":"Chart1_div",
        "dataSourceUrl":"https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response",
        "refreshInterval":3600,
        "chartType":"GeoChart",
        "options":{
            "width": 630,
            "height": 440,
            "title": "test"
            }
    });
    data1.draw();
    }
*/
    var data2 = new google.visualization.ChartWrapper({
        "containerId":"Chart2_div",
        "dataSourceUrl":"https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response",
        "refreshInterval":3600,
        "chartType":"ColumnChart",
        "options":{
            "width": 630,
            "height": 440,
            "title": "test"
            }
    });
    data2.draw();
    }
</script>






</head>
<body>
    <h1>Test</h1>
    <div id="Chart1_div"></div>
    <p></p>
    <div id="Chart2_div"></div>

</body>
</html>
4

2 回答 2

2

您在该行之后有一个额外的“}” data1.draw();，它正在关闭该drawCharts函数。删除它允许查询运行，但最终会导致两个图表之间发生冲突，将查询发送到相同数据的相同源。由于它们都使用相同的数据，因此使用一个同时填充两个图表的查询是有意义的：

function drawCharts(){
    var query = new google.visualization.Query('https://alexandalexaanalytics.appspot.com/query?id=ahdzfmFsZXhhbmRhbGV4YWFuYWx5dGljc3IVCxIIQXBpUXVlcnkYgICAgIDwiwoM&format=data-table-response');
    query.setRefreshInterval(3600);
    query.send(function (response) {
        if (response.isError()) {
            alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
            return;
        }
        var dataTable = response.getDataTable();
        var data1 = new google.visualization.ChartWrapper({
            "containerId":"Chart1_div",
            "dataTable":dataTable,
            "refreshInterval":3600,
            "chartType":"GeoChart",
            "options":{
                "width": 630,
                "height": 440,
                "title": "test"
            }
        });
        data1.draw();

        var data2 = new google.visualization.ChartWrapper({
            "containerId":"Chart2_div",
            "dataTable":dataTable,
            "refreshInterval":3600,
            "chartType":"ColumnChart",
            "options":{
                "width": 630,
                "height": 440,
                "title": "test"
            }
        });
        data2.draw();
    });
}

看到它在这里工作：http: //jsfiddle.net/asgallant/j5eea/

于 2013-08-06T16:34:32.077 回答
1

Google Analytics SuperProxy 代码中存在一个错误，该错误会阻止多个图表在单个页面上运行。现在已经更新，下面是来自 githb 的示例 html。

非常感谢 asgallant 在没有他的评论的情况下对此进行了调查，我不知道要搜索什么来回答这个问题。

    <! --
  Based on demo video: https://www.youtube.com/watch?v=8Or8KIhpsqg
  This shows you how to power 2 Pie Charts using the Google Analytics
  superProxy. Each chart uses, as a data source, a public superProxy URL
  with the format set to Data Table Response.
-->
<html>
<head>
  <title>Pie!</title>

  <!--Load the AJAX API-->
  <script type="text/javascript"
    src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1"}]}'>
  </script>

  <!-- Visualization -->
  <!-- https://developers.google.com/chart/interactive/docs/reference#google.visualization.drawchart -->
  <script type="text/javascript">
    google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {

      var browserWrapper = new google.visualization.ChartWrapper({
          // Example Browser Share Query
         "containerId": "browser",
                          // Example URL: http://your-application-id.appspot.com/query?id=QUERY_ID&format=data-table-response
         "dataSourceUrl": "REPLACE WITH Google Analytics superProxy PUBLIC URL, DATA TABLE RESPONSE FORMAT",
         "refreshInterval": REPLACE_WITH_A_TIME_INTERVAL,
         "chartType": "PieChart",
         "options": {
            "showRowNumber" : true,
            "width": 630,
            "height": 440,
            "is3D": true,
            "title": "REPLACE WITH TITLE"
         }
       });

      var countryWrapper = new google.visualization.ChartWrapper({
        // Example Country Share Query
         "containerId": "country",
         "dataSourceUrl": "REPLACE WITH Google Analytics superProxy PUBLIC URL, DATA TABLE RESPONSE FORMAT",
         "refreshInterval": REPLACE_WITH_A_TIME_INTERVAL,
         "chartType": "PieChart",
         "options": {
            "showRowNumber" : true,
            "width": 630,
            "height": 440,
            "is3D": true,
            "title": "REPLACE WITH TITLE"
         }
       });

      browserWrapper.draw();
      countryWrapper.draw();

    }
  </script>
</head>
<body>
  <h1>Pie!</h1>
  <div id="browser" style="margin:auto;width:630px;"></div>
  <div id="country" style="margin:auto;width:630px;"></div>
</body>
</html>
于 2013-08-07T09:23:02.290 回答