Question

我有这个：

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

实际上显示空白页。

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

有可能吗？不知道我在做什么错

Answer 1

首先是容器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>

如何使用数据组并在柱形图中显示结果？可能吗？

1 个答案: