Google Chart. Данные Separe по идентификатору - PullRequest
Новая
       0

Google Chart. Данные Separe по идентификатору

1 голос
/ 16 января 2020

Мне нужно нарисовать 2 линии на одном графике. Примерно так: example chart

Типичный фрагмент кода для этого выглядит примерно так: 

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 Документация и нашел функцию group(). Я думаю, что это может быть работой.

Кроме того, я видел здесь другой пример, более сложный, чем тот, который он использует с помощью этой функции.

Но я не могу повторить поведение что мне нужно

1 Ответ

1 голос
/ 16 января 2020

сначала нам нужен отдельный столбец для каждого идентификатора (продажи, расходы)
мы можем использовать представление данных с вычисляемыми столбцами.

тогда мы будем использовать групповую функцию, чтобы свернуть строки и удалить дублирующиеся значения оси 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>
...