Google 图表。按 Id 分隔数据

Question

我需要在同一张图表上画两条线。像这样的东西：

典型的代码片段是这样的：

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }

但我需要用另一种格式做同样的事情：

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Data', 'Id'],
          ['2004',  400,     'Expenses']
          ['2004',  1000,      'Sales'],
          ['2005',  1170,      'Sales'],
          ['2005',  460,      'Expenses'],
          ['2006',  660,       'Sales'],
          ['2006',  1120       'Expenses'],
          ['2007',  1030,      'Sales'],
          ['2007',  540,      'Expenses']
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }

我一直在阅读 google 图表 documentation，我找到了函数 group()。我认为它可以工作。

此外，我看到另一个比这个更难的例子，它正在使用这个函数。

但我无法复制我需要的行为。

Answer 1

首先，我们需要为每个 ID（销售额、费用）设置单独的列
我们可以使用带有计算列的数据视图。

然后我们将使用组函数折叠行并删除重复的 x 轴值。

请参阅以下工作片段..

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Data', 'Id'],
    ['2004',  400, 'Expenses'],
    ['2004',  1000, 'Sales'],
    ['2005',  1170, 'Sales'],
    ['2005',  460, 'Expenses'],
    ['2006',  660, 'Sales'],
    ['2006',  1120, 'Expenses'],
    ['2007',  1030, 'Sales'],
    ['2007',  540, 'Expenses']
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: {
      position: 'bottom'
    }
  };

  // create data view with columns for each id
  var view = new google.visualization.DataView(data);
  var aggColumns = [];
  var viewColumns = [0];  // <-- include x-axis as first column
  data.getDistinctValues(2).forEach(function (id, index) {
    // add view column for id
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 2) === id) {
          return dt.getValue(row, 1);
        }
        return null;
      },
      label: id,
      type: 'number'
    });

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

  // aggregate data view
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(aggData, options);
});

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

Google 图表。按 Id 分隔数据

Google Chart. Separe data by Id

javascript

charts

google-visualization