Javascript Google图表：表中列的自定义视图

我正在尝试创建一个谷歌图表表，其中包含两个下拉按钮，当选择其中一个下拉按钮时，会将主KPI显示为一列，以及该按钮之前的所有KPI列

例如，选择主KPI 2并显示该列时，还应显示KPI列KPI 4、KPI 5、KPI 6和KPI 7。当您将下拉列更改为“主要KPI 3”时，该列以及KPI 9和KPI 10列应仅显示

这可能吗

我一直在尝试用表选项中的视图来解决这个问题

{type:'number'，label:data.getColumnLabel（2），calc:function（dt，row）{return dt.getValue（row，3）}

下面是一个示例图形：

有什么想法或建议吗

这里是JSFiddle：

---

这里是整个HTML文件：

以显示每个单独的kpi列，
kpi在数据表中必须有自己的列

目前，所有这些都在一列--

'kpi'

我们可以使用数据视图转换现有的数据表

在这里，我们使用数据表方法

getDistinctValues（colIndex）

来构建唯一KPI的列表，
然后为每个
我们还聚合数据视图，以便将所有值放在同一行上

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

  // add agg column for id
  aggColumns.push({
    aggregation: google.visualization.data.sum,
    column: index + 2,
    label: kpi,
    type: 'number'
  });
});
view.setColumns(viewColumns);

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

接下来，为了在过滤器更改时更改表视图，
我们将无法使用dashboard

bind

方法

相反，我们使用原始数据表手动绘制过滤器。
然后收听

'statechange'

事件，
以构建表视图，并绘制

// Create a filter, passing some options
var peergroupFilter = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'filter_div',
  dataTable: data,
  options: {
    filterColumnLabel: 'Peer Group',
    ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        caption: 'Choose Peer Group',
        sortValues: false,
        allowNone: false,
    }}
});
google.visualization.events.addListener(peergroupFilter, 'statechange', setKPI);
peergroupFilter.draw();

// Create a filter, passing some options
var kpiFilter = new google.visualization.ControlWrapper({
  controlType: 'CategoryFilter',
  containerId: 'filter_div2',
  dataTable: data,
  options: {
    filterColumnLabel: 'KPIs',
    values: ['Main KPI 1', 'Main KPI 2', 'Main KPI 3', 'Main KPI 4', 'Main KPI 5', 'Main KPI 6', 'Main KPI 7'],
    ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false,
        caption: 'Choose KPI',
        sortValues: false,
        allowNone: false,
    }}
});
google.visualization.events.addListener(kpiFilter, 'statechange', setKPI);
kpiFilter.draw();

当

'statechange'

事件在任一筛选器上激发时，
我们得到所选的过滤器值--

getState（）

我们使用对等组值来设置行，
和kpi筛选器来设置列。
然后画桌子

function setKPI() {
  // get filter values
  var peerGroup = peergroupFilter.getState().selectedValues[0];
  var kpi = kpiFilter.getState().selectedValues[0];

  // get rows
  var rows = aggData.getFilteredRows([{
    column: 1,
    value: peerGroup
  }]);

  // get columns
  var cols = [0];
  switch (kpi) {
    case 'Main KPI 1':
      cols.push(getColumnIndex('KPI 1', aggData));
      cols.push(getColumnIndex('KPI 2', aggData));
      break;

    case 'Main KPI 2':
      cols.push(getColumnIndex('KPI 4', aggData));
      cols.push(getColumnIndex('KPI 5', aggData));
      cols.push(getColumnIndex('KPI 6', aggData));
      cols.push(getColumnIndex('KPI 7', aggData));
      break;

    case 'Main KPI 3':
      cols.push(getColumnIndex('KPI 9', aggData));
      cols.push(getColumnIndex('KPI 10', aggData));
      break;

    case 'Main KPI 4':
      cols.push(getColumnIndex('KPI 12', aggData));
      cols.push(getColumnIndex('KPI 13', aggData));
      break;

    case 'Main KPI 5':
      cols.push(getColumnIndex('KPI 15', aggData));
      cols.push(getColumnIndex('KPI 16', aggData));
      cols.push(getColumnIndex('KPI 17', aggData));
      break;

    case 'Main KPI 6':
      cols.push(getColumnIndex('KPI 19', aggData));
      cols.push(getColumnIndex('KPI 20', aggData));
      break;

    case 'Main KPI 7':
      cols.push(getColumnIndex('KPI 22', aggData));
      cols.push(getColumnIndex('KPI 23', aggData));
      break;
  }
  cols.push(getColumnIndex(kpi, aggData));

  // format columns
  cols.forEach(function (colIndex) {
    if (colIndex === 0) {
      return;
    }
    formatNumber.format(aggData, colIndex);
    formatBar.format(aggData, colIndex);
  });

  // set view, draw table
  Table.setView({
    columns: cols,
    rows: rows
  });
  Table.draw();
}

---

请参阅以下工作指南…

---

非常感谢–这正是我想要的！我对编程相当陌生，我根本没有想过使用

开关

或

案例

。我也从未真正使用过

'statechange'

或手动过滤器；我必须阅读更多关于这方面的文档。如果您有任何书籍或网站可以推荐，我将不胜感激！再次感谢你！干杯以上大部分内容的文档可在此处找到-->