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

问题描述

希望这适用于堆栈交换.如果没有，我很抱歉.

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

这听起来很混乱，把它写出来.数据如下所示:

<预><代码>[['项目','PM','年份'],['PRJ0001','John Doe','2012'],['PRJ0002','John Doe','2012'],['PRJ0003','Jackie Johnson','2013'],等等等等，]

我按项目经理姓名创建计数没有问题，但我丢失"了年份作为我可以过滤的指标.有人有什么想法吗?

解决方案

单独绘制每个控件

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

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

在滑块上重新绘制图表'statechange'
使用滑块低/高值使用 getFilteredRows

构建视图

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

google.charts.load('current', {回调:函数(){var 数据 = google.visualization.arrayToDataTable([['项目','PM','年份'],['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]]);变量选项 = {高度:400，h轴:{视窗:{分钟:0，最大:5}}};绘制图表(数据)；var 滑块 = 新的 google.visualization.ControlWrapper({controlType: 'NumberRangeFilter',容器 ID: 'filter_div',数据表:数据，选项: {过滤列索引:2，用户界面:{格式:{模式:'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(dataTable) {var dataGroup = google.visualization.data.group(数据表，[1],[{列:1，聚合:google.visualization.data.count，类型:'数字'，标签:'计数'}]);var chart = new google.visualization.BarChart(document.getElementById('chart_div'));图表绘制(数据组，选项)；}},包:['控件'，'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屋！