javascript - 如何使用数据组并在柱形图中显示结果？是否可以？

我有这个:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8"/>

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

        <script type="text/javascript">


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

            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {

                var data = new google.visualization.DataTable();
                  data.addColumn('number', 'ID');
                  data.addColumn('string', 'Customer_Name');
                  data.addColumn('number', 'Credits');
                  data.addColumn('string', 'Date');
                  data.addColumn('string', 'Seller');
                  data.addColumn('string', 'Branch');

                  data.addRows([
                    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
                    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch1'],
                    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
                ]);

                var groupedData = google.visualization.data.group(data, [5], [{
                    column: 0,
                    type: 'number',
                    label: data.getColumnLabel(0),
                    aggregation: google.visualization.data.count
                }]);

        var t2 = new google.visualization.columnChart(document.getElementById('#t2'));
                t2.draw(groupedData);

            }
    </script>

  </head>

    <div id="t2"></div>

</html>

实际显示一个空白页。

我需要对这些数据进行分组，因为稍后我需要使用具有相同数据源的多个图表和表格，以由页面中唯一的字符串过滤器控制，这将过滤所有图表通过“分支”列。

这可能吗？不知道我做错了什么

最佳答案

首先是容器id，
使用 getElementById 时，不要包含 # 应该是……

document.getElementById('t2')

接下来，图表类应该大写 --> ColumnChart

请参阅以下工作片段...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'ID');
  data.addColumn('string', 'Customer_Name');
  data.addColumn('number', 'Credits');
  data.addColumn('string', 'Date');
  data.addColumn('string', 'Seller');
  data.addColumn('string', 'Branch');

  data.addRows([
    [123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
    [321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch1'],
    [213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
  ]);

  var groupedData = google.visualization.data.group(data, [5], [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]);

  var t2 = new google.visualization.ColumnChart(document.getElementById('t2'));
  t2.draw(groupedData);
}

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

关于javascript - 如何使用数据组并在柱形图中显示结果？是否可以？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51294644/

javascript - 如何使用数据组并在柱形图中显示结果？是否可以？

上一篇：javascript - 使用 Promise 的 MongoDB 查询性能

下一篇：javascript - 当球与矩形碰撞时如何改变 Angular ？