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

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

javascript charts google-visualization

Javascript 如何将Google可视化查询转换为图表？,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我正在尝试使用GoogleCharts API将GoogleVisualization查询转换为图表我目前拥有以下数据：我正试图将此转化为图表，但我没有得到任何运气，我尝试的是： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

我正在尝试使用GoogleCharts API将GoogleVisualization查询转换为图表

我目前拥有以下数据：

我正试图将此转化为图表，但我没有得到任何运气，我尝试的是：

<!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>


load（'current'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=new google.visualization.Query（'https://www.google.com/trends/fetchComponent?hl=en-美国&q=battle%201&cid=TIMESERIES\u GRAPH\u 0&export=3&w=500&h=300&gprop=youtube&date=today%201-m'）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表绘制（数据、选项）；
}

我不明白为什么这不能将我的数据转换成图表，非常感谢您的任何帮助

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

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

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

google.charts.load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var query=new google.visualization.query（'https://www.google.com/trends/fetchComponent?hl=en-美国&q=battle%201&cid=TIMESERIES\u GRAPH\u 0&export=3&w=500&h=300&gprop=youtube&date=today%201-m'）；
query.send（函数（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'-'+response.getDetailedMessage（））；
返回；
}
data=response.getDataTable（）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns([{
计算：函数（数据，行）{
返回数据.getFormattedValue（行，0）；
},
键入：“字符串”，
标签：数据。getColumnLabel（0）
}, 1]);
var chart=new google.visualization.PieChart（document.getElementById（'chart_div'）；
图表。绘制（视图{
图表区：{
高度：“100%”，
宽度：“100%”
},
身高：400
});
});
}