charts - 我想要一个具有组合 x 轴值的谷歌图表

Question

我得到这样的图表--> https://imgur.com/8DGPUTC但我想要像这样结合 x 轴的 google 图表 --> https://imgur.com/a/2lXxMv5

这是我的代码:

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
               ["BusinessUnit", "Year", "AvgEmpCost"],
               ["BU-1", 2014, 119329],
               ["BU-1", 2015, 125542],
               ["BU-1", 2016, 120894],
               ["BU-1", 2017, 130776],
               ["BU-1", 2018, 141465],
               ["BU-1", 2019, 153028],
               ["BU-2", 2014, 130722],
               ["BU-2", 2015, 131218],
               ["BU-2", 2016, 131451],
               ["BU-2", 2017, 134897],
               ["BU-2", 2018, 138432],
               ["BU-2", 2019, 142061],
  ]);

  var options = {
    chart: {
      title: 'buspentamt',

    }
  };

  var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}

Answer 1

要生成有问题的图表，您需要每年的系列列，
数据表将需要类似于以下的格式...

var data = google.visualization.arrayToDataTable([
  ["BusinessUnit", "2014", "2015", "2016"],
  ["BU-1", 119329, 125542, 120894],
  ["BU-2", 130722, 131218, 131451],
]);

不确定数据是如何构建的，
但我们可以使用数据 View 将行转换为列，
然后使用group函数聚合数据。
这将避免必须修改后端查询。

请参阅以下工作片段以获取示例...

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

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["BusinessUnit", "Year", "AvgEmpCost"],
      ["BU-1", 2014, 119329],
      ["BU-1", 2015, 125542],
      ["BU-1", 2016, 120894],
      ["BU-1", 2017, 130776],
      ["BU-1", 2018, 141465],
      ["BU-1", 2019, 153028],
      ["BU-2", 2014, 130722],
      ["BU-2", 2015, 131218],
      ["BU-2", 2016, 131451],
      ["BU-2", 2017, 134897],
      ["BU-2", 2018, 138432],
      ["BU-2", 2019, 142061],
    ]);

    var options = {
      chart: {
        title: 'buspentamt'
      },
      height: 400
    };

    // init column arrays
    var aggColumns = [];
    var viewColumns = [0];

    // build view & agg columns for each year
    data.getDistinctValues(1).forEach(function (year, index) {
      // add view column for year
      viewColumns.push({
        calc: function (dt, row) {
          if (dt.getValue(row, 1) === year) {
            return dt.getValue(row, 2);
          }
          return null;
        },
        label: year,
        type: 'number'
      });

      // add agg column
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index + 1,
        label: year,
        type: 'number'
      });
    });

    // set view columns
    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    // agg view by business unit
    var aggData = google.visualization.data.group(
      view,
      [0],
      aggColumns
    );

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    // use aggData to draw chart
    chart.draw(aggData, google.charts.Bar.convertOptions(options));
  }

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

编辑

计算每个BU的年数，
请参阅以下工作片段...

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["BusinessUnit", "Year"],
    ["BU-1", 2014],
    ["BU-1", 2015],
    ["BU-1", 2016],
    ["BU-1", 2017],
    ["BU-1", 2018],
    ["BU-1", 2019],
    ["BU-2", 2014],
    ["BU-2", 2015],
    ["BU-2", 2016],
    ["BU-2", 2017],
    ["BU-2", 2018],
    ["BU-2", 2019],
  ]);

  var options = {
    chart: {
      title: 'buspentamt'
    },
    height: 400
  };

  // init column arrays
  var aggColumns = [];
  var viewColumns = [{
    calc: function () {
      return 'Number of Years';
    },
    label: 'Years',
    type: 'string'
  }];

  // build view & agg columns for each bu
  data.getDistinctValues(0).forEach(function (bu, index) {
    // add view column for bu
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 0) === bu) {
          return 1;
        }
        return null;
      },
      label: bu,
      type: 'number'
    });

    // add agg column
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: bu,
      type: 'number'
    });
  });

  // set view columns
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  // agg view by business unit
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var chart = new google.charts.Bar(document.getElementById('chart'));

  // use aggData to draw chart
  chart.draw(aggData, google.charts.Bar.convertOptions(options));
}

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