如何格式化Google Chart数据以显示项目数，但可以按年份过滤

小编典典

如何格式化Google Chart数据以显示项目数，但可以按年份过滤

json

希望这适用于stackexchange。如果没有，我表示歉意。

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

听起来很混乱，把它写出来。数据如下所示：

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

我没有按项目经理姓名创建计数的问题，但是我将年份“损失”为可以过滤的指标。有人有主意吗？

阅读 307

2020-07-27

共1个答案

小编典典

分别绘制每个控件

用于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>

2020-07-27