Question

我正在尝试使用Google图表API将Google可视化查询转换为图表。

我目前拥有的数据来自：https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=TIMESERIES_GRAPH_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m

我试图把它变成一张图表，但我没有运气，我尝试过的是：

<!DOCTYPE html>
<html>
<head>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script>

    google.charts.load('current', {'packages':['corechart']});

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

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=TIMESERIES_GRAPH_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

     </script>
</head>
<body>
    <div id="chart_div"></div>
</body>
</html>

我无法理解为什么这不会将我的数据转换成图表，我们非常感谢任何帮助

Answer 1

首先，需要发送查询并从响应中获取数据

接下来，要绘制饼图，第一列必须是字符串

请参阅以下工作代码段，该代码段使用数据视图将第一列转换为字符串...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=TIMESERIES_GRAPH_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
      return;
    }
    data = response.getDataTable();
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (data, row) {
        return data.getFormattedValue(row, 0);
      },
      type: 'string',
      label: data.getColumnLabel(0)
    }, 1]);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(view, {
      chartArea: {
        height: '100%',
        width: '100%'
      },
      height: 400
    });
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

如何将Google可视化查询转换为图表？

1 个答案: