我如何格式化谷歌图表数据，以显示项目的计数，但按年过滤

How do I format Google Chart data to show a count of items, but be filterable by year

本文关键字：项目 过滤 显示 格式化 谷歌 数据      更新时间：2023-09-26

希望这适合于stackexchange。如果没有，我道歉。

无论如何，我有一组数据，本质上是一个项目列表，与每个项目相关的人员以及项目开始的年份。我想做的是呈现一个条形图，显示每个人的项目总数，但以某种方式保留单个项目开始的年份，这样我就可以创建一个滑块过滤器。

写出来听起来很混乱。数据如下所示:

[
    ['Project','PM','Year'],
    ['PRJ0001','John Doe','2012'],
    ['PRJ0002','John Doe','2012'],
    ['PRJ0003','Jackie Johnson','2013'],
    Etc, etc,
]

我按项目经理的名字创建计数没有问题，但是我"失去"了作为我可以过滤的度量标准的年份。有人有什么想法吗?

分别绘制每个控件

使用data.group获取每个人的计数并绘制图表

用原始数据绘制滑块(需要更改NumberRangeFilter的列类型)

重画滑块'statechange'上的图表
使用滑块低/高值使用getFilteredRows构建视图

请参阅下面的工作代码片段…

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Project','PM','Year'],
      ['PRJ0001','John Doe',2012],
      ['PRJ0002','John Doe',2012],
      ['PRJ0003','John Doe',2012],
      ['PRJ0004','John Doe',2013],
      ['PRJ0005','Jackie Johnson',2012],
      ['PRJ0006','Jackie Johnson',2013],
      ['PRJ0007','Jackie Johnson',2014]
    ]);
    var options = {
      height: 400,
      hAxis: {
        viewWindow: {
          min: 0,
          max: 5
        }
      }
    };
    drawChart(data);
    var slider = new google.visualization.ControlWrapper({
      controlType: 'NumberRangeFilter',
      containerId: 'filter_div',
      dataTable: data,
      options: {
        filterColumnIndex: 2,
        ui: {
          format: {pattern: '0'}
        }
      }
    });
    google.visualization.events.addListener(slider, 'statechange', function () {
      var range = slider.getState();
      var view = new google.visualization.DataView(data);
      view.setRows(data.getFilteredRows([{
        column: 2,
        minValue: range.lowValue,
        maxValue: range.highValue
      }]));
      drawChart(view);
    });
    slider.draw();
    function drawChart(dataTable) {
      var dataGroup = google.visualization.data.group(
        dataTable,
        [1],
        [{column: 1, aggregation: google.visualization.data.count, type: 'number', label: 'Count'}]
      );
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(dataGroup, options);
    }
  },
  packages: ['controls', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>

相关文章：