在Google图表中使用外部网址绘制饼图

时间:2019-04-15 21:19:56

标签: javascript html google-visualization pie-chart google-chartwrapper

我正在尝试使用此google spreadsheet来通过Google图表API绘制饼图。我正确地获得了查询结果。但是,当尝试使用查询结果生成数据表时,我是this error

如您所见,我还为每个查询结果添加了标签。但是错误仍然存​​在。

<html>

<head>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    // Load the Visualization API and the controls package.
    google.charts.load("current", {
      packages: ["corechart"]
    });

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

    // Callback that creates and populates a data table,
    // instantiates a dashboard, a range slider and a pie chart,
    // passes in the data and draws it.
    function initialize() {
      var opts = {
        sendMethod: "auto"
      };
      // Replace the data source URL on next line with your data source URL.
      var query = new google.visualization.Query(
        "https://docs.google.com/spreadsheets/d/1SfDouyZc9wKj1PGyIXL3rbYKav4oDyRXzxEWDgSIqkY/edit?usp=sharing",
        opts
      );

      // Optional request to return only column C and the sum of column B, grouped by C members.
      // query.setQuery("select sum(G), sum(E),sum(F),sum(G)-sum(J) label sum(G) 'Total Scripts', sum(E) 'New Scripts'\
      // ,sum(F) 'Refills', sum(G)-sum(J) 'Script Lift' ");
      query.setQuery("select sum(G),sum(E) label sum(G) 'Total Scripts', sum(E) 'New Scripts'");
      // Send the query with a callback function.
      query.send(handleQueryResponse);
    }

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

      console.log(response);
      // Called when the query response is returned.
      var data = response.getDataTable();
      var chart = new google.visualization.PieChart(document.getElementById("Maestro_script_data_1"));
      chart.draw(data, {
        title: "Script Summary",
        width: 500,
        height: 500,
        pieSliceText: "value",
        legend: "bottom",
        pieHole: 0.3
      });

    }
  </script>
</head>

<body>
  <!--Div that will hold the dashboard-->
  <div id="FirstSummary">
    <table class="columns">
      <tr>
        <td>
          <div id="Maestro_script_data_1" style="border: 1px solid #ccc"></div>
        </td>
        <td>
          <div id="Maestro_script_data_2" style="border: 1px solid #ccc"></div>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

如果有人可以帮助我解决该问题,以及如何正确呈现饼状图查询的两个汇总数据,这将非常有帮助。

0 个答案:

没有答案