Google图表。按ID分隔数据

小牛94

我需要在同一张图表中绘制2条线。像这样:图表示例

为此的典型代码片段是这样的:

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()我认为这可能是可行的。

另外,我在这里看到另一个比使用此功能困难的示例。

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

白帽

首先,我们需要为每个编号(销售,费用)
使用单独的列,然后才能将数据视图与已计算的列一起使用。

然后我们将使用group函数折叠行并删除重复的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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章