Question

我正在使用Google图表使用LINQ查询的JSON结果构建仪表板。我已经成功建立了按月分组的表格图表，但是我想按时间顺序而不是字母顺序显示月份。

我尝试传递日期而不是字符串月份名称，但是后来我不再能够按月份分组-而是按日期分组。

我也尝试过传递月份号和月份名称{v：monthNum，f：monthName}，但是一旦进行汇总，这似乎就会丢失。

这段代码主要基于我在WhiteHat（https://stackoverflow.com/users/5090771/whitehat）的答案中在SO上找到的许多示例。

var heading = ["Month", "Category"];
arrOutside[0] = heading;

for (var i = 0; i < dataJson.length; i++) {
     var arr = [dataJson[i].ReportMonth, dataJson[i].Category];                        
     arrOutside[i + 1] = arr;
}

var data = new google.visualization.arrayToDataTable(arrOutside);

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

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

var aggColumns = [];

var viewColumns = [0];

groupData.getDistinctValues(1).forEach(function (category, index) {
     viewColumns.push({
          calc: function (dt, row) {
              if (dt.getValue(row, 1) === category) {
                   return dt.getValue(row, 2);
              }
              return null;
          },
          label: category,
          type: 'number'
     });

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

view.setColumns(viewColumns);

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

var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(aggData);

此代码生成一个如下表：分类| 4月| 2月|一月|三月

但我希望它显示：分类|一月| 2月| 3月|四月

这可能吗？

编辑

此代码成功创建了一个表，其中按时间顺序列出了月份，但是它将所有类别归为一个类别，并给了我一个总数，而不是我之前代码中的单个类别数。我只是不知道如何正确地将两者结合起来……

function (dataJson) {

    var arrOutside = new Array();

    var heading = ["Month", "Category"];
    arrOutside[0] = heading;

    for (var i = 0; i < dataJson.length; i++) {                        

          var arr = [new Date(dataJson[i].ReportDate), dataJson[i].Category];                        
          arrOutside[i + 1] = arr;
    }                                        

    var data = new google.visualization.arrayToDataTable(arrOutside);

    var formatDate = new google.visualization.DateFormat({ pattern: 'MMM' });

    var dataGroup = google.visualization.data.group(
        data,
        [{
            column: 0,
            label: 'Month',
            modifier: function (val) {
            return formatDate.formatValue(val);
            },
            type: 'string'
        }],

        [{
            aggregation: google.visualization.data.count,
            column: 1,
            label: "Category Count",
            type: 'number'
        }]
    );

    var view = new google.visualization.DataView(dataGroup);
    view.setRows([2, 1, 3, 0]);

    var chart = new google.visualization.ChartWrapper({
         chartType: 'ColumnChart',
         containerId: 'chart_div',
         dataTable: view
    });
    chart.draw();

    var table = new google.visualization.ChartWrapper({
         chartType: 'Table',
         containerId: 'table_div',
         dataTable: view
    });
    table.draw()

}

Answer 1

首先，需要在第一种分组方法中按月份和类别进行分组。

var dataGroup = google.visualization.data.group(
  data,
  [1, {  // <-- add index for category
    column: 0,
    label: 'Month',
    modifier: function (val) {
      return formatDate.formatValue(val);
    },
    type: 'string'
  }],
  [{
    aggregation: google.visualization.data.count,
    column: 1,
    label: "Category Count",
    type: 'number'
  }]
);

接下来，仍然需要按列进行聚合，如上面的第一个代码段所示。

// create columns for each month
var view = new google.visualization.DataView(dataGroup);
var aggColumns = [];
var viewColumns = [0];
dataGroup.getDistinctValues(1).forEach(function (category, index) {
  viewColumns.push({
    calc: function (dt, row) {
      if (dt.getValue(row, 1) === category) {
        return dt.getValue(row, 2);
      }
      return null;
    },
    label: category,
    type: 'number'
  });

  aggColumns.push({
    aggregation: google.visualization.data.sum,
    column: index + 1,
    label: category,
    type: 'number'
  });
});
view.setColumns(viewColumns);
var aggData = google.visualization.data.group(
  view,
  [0],
  aggColumns
);

然后我们可以设置时间顺序。

// set columns in chron order
var view = new google.visualization.DataView(aggData);
var viewColumns = [0];
var monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
monthOrder.forEach(function (month, index) {
  for (var i = 1; i < aggData.getNumberOfColumns(); i++) {
    if (aggData.getColumnLabel(i) === month) {
      viewColumns.push(i);
    }
  }
});
view.setColumns(viewColumns);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  // process json data
  var dataJson = [
    {ReportDate: '04/01/2019', Category: 'A'},
    {ReportDate: '04/02/2019', Category: 'A'},
    {ReportDate: '04/03/2019', Category: 'A'},
    {ReportDate: '05/04/2019', Category: 'A'},
    {ReportDate: '05/05/2019', Category: 'A'},
    {ReportDate: '05/06/2019', Category: 'A'},
    {ReportDate: '06/07/2019', Category: 'A'},
    {ReportDate: '06/08/2019', Category: 'A'},
    {ReportDate: '06/09/2019', Category: 'A'},
    {ReportDate: '07/10/2019', Category: 'A'},
    {ReportDate: '04/01/2019', Category: 'B'},
    {ReportDate: '04/02/2019', Category: 'B'},
    {ReportDate: '04/03/2019', Category: 'B'},
    {ReportDate: '05/04/2019', Category: 'B'},
    {ReportDate: '05/05/2019', Category: 'B'},
    {ReportDate: '05/06/2019', Category: 'B'},
    {ReportDate: '06/07/2019', Category: 'B'},
    {ReportDate: '06/08/2019', Category: 'B'},
    {ReportDate: '06/09/2019', Category: 'B'},
    {ReportDate: '07/10/2019', Category: 'B'}
  ];
  var arrOutside = new Array();
  var heading = ['Month', 'Category'];
  arrOutside[0] = heading;
  for (var i = 0; i < dataJson.length; i++) {
    var arr = [new Date(dataJson[i].ReportDate), dataJson[i].Category];
    arrOutside[i + 1] = arr;
  }
  var data = new google.visualization.arrayToDataTable(arrOutside);
  var formatDate = new google.visualization.DateFormat({pattern: 'MMM'});
  var dataGroup = google.visualization.data.group(
    data,
    [1, {
      column: 0,
      label: 'Month',
      modifier: function (val) {
        return formatDate.formatValue(val);
      },
      type: 'string'
    }],
    [{
      aggregation: google.visualization.data.count,
      column: 1,
      label: "Category Count",
      type: 'number'
    }]
  );

  // create columns for each month
  var view = new google.visualization.DataView(dataGroup);
  var aggColumns = [];
  var viewColumns = [0];
  dataGroup.getDistinctValues(1).forEach(function (category, index) {
    viewColumns.push({
      calc: function (dt, row) {
        if (dt.getValue(row, 1) === category) {
          return dt.getValue(row, 2);
        }
        return null;
      },
      label: category,
      type: 'number'
    });

    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: index + 1,
      label: category,
      type: 'number'
    });
  });
  view.setColumns(viewColumns);
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // set columns in chron order
  var view = new google.visualization.DataView(aggData);
  var viewColumns = [0];
  var monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  monthOrder.forEach(function (month, index) {
    for (var i = 1; i < aggData.getNumberOfColumns(); i++) {
      if (aggData.getColumnLabel(i) === month) {
        viewColumns.push(i);
      }
    }
  });
  view.setColumns(viewColumns);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    containerId: 'chart_div',
    dataTable: view
  });
  chart.draw();

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div',
    dataTable: view
  });
  table.draw()
});

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

可以按时间顺序的月份名称对Google图表分组的数据进行排序吗？

1 个答案: