如何格式化Google图表数据以显示项目数量，但可以按年份过滤 [英] How do I format Google Chart data to show a count of items, but be filterable by year

问题描述

希望这适用于堆栈交换。如果不是这样，我的道歉。

无论如何，我有一组数据，基本上是一个项目列表，每个项目绑定的人，以及一年项目开始了。我想要做的是绘制一个条形图，显示每个人的项目总数，但以某种方式保持单个项目启动的年份，以便创建滑块过滤器。

这听起来令人困惑，写出来。数据如下所示：

  [
 ['Project'，'PM'，'Year']，
 ['PRJ0001'，'John Doe'，'2012']，
 ['PRJ0002'，'John Doe'，'2012']，
 ['PRJ0003'，'Jackie Johnson' ，'2013']，
等等，
] 
  

我有按项目经理的名字创建一个计数没有问题，但我失去了一年作为我可以过滤的指标。任何人有任何想法？

解决方案

使用每个控件分别使用

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

绘制滑块与原始数据（需要更改 NumberRangeFilter ）

重新绘制滑块上的图表'statechange'

使用滑块低/高值使用 getFilteredRows

构建视图

见下面的工作片段...

google.charts.load（'当前'，{callback：function（）{var data = google.visualization.arrayToDataTable（[''Project'，'PM'，'Year']，['PRJ0001'，'John Doe'，2012]，['PRJ0002 '，'John Doe'，2012]，['PRJ0003'，'J 2013年]，['PRJ0004'，'John Doe'，2013]，['PRJ0005'，'Jackie Johnson'，2012]，['PRJ0006'，'Jackie Johnson'，2013]，['PRJ0007' ，'杰基约翰逊'，2014]]）; var options = {height：400，hAxis：{viewWindow：{min：0，max：5}}}; drawChart（数据）; 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（[{列：2，minValue：range.lowValue，maxValue：range.highValue}]））; drawChart（view）;}）; slider.draw（）;函数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>  

Hopefully this is appropriate for stackexchange. If not, my apologies.

Anyway, I have a set of data that is essentially a list of projects, the person tied to each project, and a year in which the project was started. What I'd like to do is render a bar chart that shows a total count of projects per individual, but somehow maintain the year in which an individual project was started so I can create a slider filter.

That sounds confusing, writing it out. The data looks like this:

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

I have no problem creating a count by project manager name, but I "lose" the year as a metric on which I can filter. Anyone have any ideas?

解决方案

draw each control separately

use data.group to get counts per person and draw chart

draw the slider with the original data (need to change column type for NumberRangeFilter)

redraw the chart on slider 'statechange'
using slider low / high values to build a view using getFilteredRows

see following working snippet...

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>

这篇关于如何格式化Google图表数据以显示项目数量，但可以按年份过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！