Question

我正在尝试在一个页面上加载一些谷歌图表，但是我试图添加第二个。“/ p>

我正在测试新的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>

Answer 1

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/

Answer 2

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>

Google Charts，在一个页面上加载不同的图表

2 个答案: