【问题标题】:How to get Google Charts to sort and give me correct answer如何让谷歌图表排序并给我正确的答案
【发布时间】:2018-01-17 14:04:27
【问题描述】:

好的,所以我有一些数据,我需要使用 Google 图表从几行代码中对 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]

如果有人能提供帮助,将不胜感激。

【问题讨论】:

    标签: javascript charts google-visualization data-visualization


    【解决方案1】:

    我不知道你说的排序 3 种答案是什么意思

    但您似乎想为饼图分组数据

    您可以使用GROUP BY 子句聚合查询结果

    query: 'SELECT A,COUNT(A) WHERE B > 100 GROUP BY A'
    

    请参阅以下工作 sn-p...

    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()
    });
    html, body, div {
      height: 100%;
    }
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="vis_div"></div>

    【讨论】:

    • 你为我节省了很多时间。非常感谢。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-24
    • 1970-01-01
    相关资源
    最近更新 更多