如何让Google Charts排序并给我正确答案

时间:2018-01-17 14:04:27

标签: javascript charts google-visualization data-visualization

好的,我有一些数据,我需要让谷歌图表从几行代码中排序3种类型的答案。如何使用我当前的代码执行此操作:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper( {
          chartType: 'PieChart',
          dataSourceUrl:'https://docs.google.com/spreadsheets/d/1xEEMFnOrrGDEAZy5YMi3H-aSfyzwtHhAmBJuJYZjXsI/gviz/tq?range=A1:B57',
          query: 'SELECT A,B WHERE B > 100 ORDER BY B',
          options: {'title': 'AASHAN OCEAN TRANSPORTATION METHOD', legend: 'none'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }


    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 700px; height: 700px;"></div>
  </body>
</html>

以下是我正在谈论从中获取代码的文档。 [Document]

如果有人可以提供帮助,那么它将会被大多数人委托。

1 个答案:

答案 0 :(得分:0)

我不确定你的意思排序3种答案

但看起来您想要将饼图的数据分组

您可以使用GROUP BY子句

聚合查询结果
query: 'SELECT A,COUNT(A) WHERE B > 100 GROUP BY A'

请参阅以下工作代码段...

&#13;
&#13;
google.charts.load('current', {
  packages:['controls', 'corechart', 'table']
}).then(function () {
  var wrapper = new google.visualization.ChartWrapper( {
    chartType: 'PieChart',
    dataSourceUrl: 'https://docs.google.com/spreadsheets/d/1xEEMFnOrrGDEAZy5YMi3H-aSfyzwtHhAmBJuJYZjXsI/gviz/tq?range=A1:B57',
    query: 'SELECT A,COUNT(A) WHERE B > 100 GROUP BY A',
    options: {title: 'AASHAN OCEAN TRANSPORTATION METHOD', legend: 'none'},
    containerId: 'vis_div'
  });
  wrapper.draw()
});
&#13;
html, body, div {
  height: 100%;
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="vis_div"></div>
&#13;
&#13;
&#13;