Jeśli mam następującą definicję tabeli danych w Google Wykresy

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('string','Team');
data.addColumn('number', 'Total Score');

A dane w tej tabeli wyglądają jak:

Dec,Team A,68
Dec,Team B,75
Dec,Team C,23
Dec,Team D,158
Dec,Team E,27
Jan,Team A,68
Jan,Team E,27

Jak mogę wyprodukować wykres liniowy w następujący sposób za pomocą Google Charts:

enter image description here

Próbowałem użyć

var lineChart = new google.charts.Line(document.getElementById('LineChart'));
lineChart.draw(data);

Ale to wytwarza pojedynczą linię z wielokrotnymi miesiącami wzdłuż osi H Wprowadź opis obrazu tutaj

Z góry dziękuję

1
Ibraheem Ibraheem 3 styczeń 2020, 19:31

1 odpowiedź

Najlepsza odpowiedź

Każda drużyna musi mieć własną serię lub kolumnę w tabeli danych,
następująco...

Month, Team A, Team B, Team C, Team D, Team E
Dec, 68, 75, 23, 158, 27

Możemy użyć funkcji grupy i widoku danych, aby przekształcić oryginalną tabelę danych.

Najpierw grupuj dane przez zespół.

// group data table
var groupData = google.visualization.data.group(
  data,
  [0, 1],
  [{
    column: 2,
    aggregation: google.visualization.data.sum,
    type: 'number'
  }]
);

Następnie możemy użyć widoku danych, aby utworzyć oddzielne kolumny / serię

// create data view
var view = new google.visualization.DataView(groupData);

// sum column array
var aggColumns = [];

// use month as first view column
var viewColumns = [0];

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

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

// set view columns
view.setColumns(viewColumns);

Następnie możemy ponownie agregować, aby zwinąć wszystkie rzędy ...

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

Zobacz następujący fragment roboczy ...

google.charts.load('current', {
  packages: ['line']
}).then(function () {
  // create data table
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('string','Team');
  data.addColumn('number', 'Total Score');
  data.addRows([
    ['Dec', 'Team A', 68],
    ['Dec', 'Team B', 75],
    ['Dec', 'Team C', 23],
    ['Dec', 'Team D', 158],
    ['Dec', 'Team E', 27],
    ['Jan', 'Team A', 68],
    ['Jan', 'Team E', 27]
  ]);

  // group data table
  var groupData = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 2,
      aggregation: google.visualization.data.sum,
      type: 'number'
    }]
  );

  // create data view
  var view = new google.visualization.DataView(groupData);

  // sum column array
  var aggColumns = [];

  // use month as first view column
  var viewColumns = [0];

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

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

  // set view columns
  view.setColumns(viewColumns);

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

  // draw chart
  var lineChart = new google.charts.Line(document.getElementById('LineChart'));
  lineChart.draw(aggData);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="LineChart"></div>
1
WhiteHat 3 styczeń 2020, 22:34