Google 可视化 getSelection() 不符合预期

Question

我想在用户做出选择器选择后访问 dashboard 的状态。

我试过使用 dashboard.getSelection()，但在选择了一个选择器后 returns 什么也没有。文档似乎描述了我想要完成的任务。

Returns an array of the selected visual entities of the charts in the dashboard. The getSelection() method, when called on the dashboard, returns an aggregate of all of the selections made on all of the charts within it, allowing for the use of a single reference when working with chart selections.

我错过了什么？

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

$(document).ready(function() {
  //console.log("ready!");
  renderChart_onPageLoad();
});

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    //console.log("renderChart_onPageLoad");
    drawDashboard_A("A");
  });
}

function drawDashboard_A(suffix) {
  //console.log("drawDashboard");

  var data = google.visualization.arrayToDataTable([
    ['Name', 'RoolNumber', 'Gender', 'Age', 'DonutsEaten'],
    ['Michael', 1, 'Male', 12, 5],
    ['Elisa', 2, 'Female', 20, 7],
    ['Robert', 3, 'Male', 7, 3],
    ['John', 4, 'Male', 54, 2],
    ['Jessica', 5, 'Female', 22, 6],
    ['Aaron', 6, 'Male', 3, 1],
    ['Margareth', 7, 'Female', 42, 8],
    ['Miranda', 8, 'Female', 33, 6]
  ]);

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_' + suffix));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryPicker1_' + suffix,
    options: {
      filterColumnLabel: 'Gender',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var categoryPicker2 = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryPicker2_' + suffix,
    options: {
      filterColumnLabel: 'RoolNumber',
      ui: {
        labelStacking: 'vertical',
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var proxyTable = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'proxyTable_' + suffix,
    options: {
      width: '500px'
    }
  });

 

  //This json contains my settings for later
  let json = {
    "tableChart": {
      "hasTable": true,
      "dataView": {
        "columns": [{
            "id": "Name"
          },
          {
            "id": "RoolNumber"
          },
          {
            "id": "Gender"
          },
          {
            "id": "Age"
          },
          {
            "id": "DonutsEaten"
          }
        ]
      },
      "groupView": {
        "hasGroupView": false
      },
      "totalRow": {
        "hasTotalRow": true,
        "labelCol": "Total",
        "labelColIndex": 0, //This is the column where the words "Grand Total" are stored.  It must be text column.
        "totalColumns": [{
          "id": "RoolNumber",
          "type": "number",
          "function": "sum"
        }]
      },
      "conditionalFormat": {
        "hasConditionalFormat": false
      },
      "options": {},
      "hasCSV": false,
      "clickGetFunc": null
    },
  };

 
  google.visualization.events.addListener(proxyTable, 'ready', function() {
    console.log(suffix + ".addListener(proxyTable, 'ready' - picker state");

    //console.log('state proxy id', proxyTable.getContainerId());
    //console.log('state proxy table', proxyTable);
    console.log('state dashboard selection', dashboard.getSelection());
    console.log('state picker1 direct', categoryPicker1.getState()); //returns result for single picker
    console.log('state picker2 direct', categoryPicker2.getState()); //returns result for single picker

  });


  dashboard.bind([categoryPicker1, categoryPicker2], [proxyTable]);
  dashboard.draw(data);
  
  }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>


<div id="dashboardA">
  <div id="categoryPicker1_A"></div><br />
  <div id="categoryPicker2_A"></div><br />
  <div id="proxyTable_A" style=""></div>
</div>

Answer 1

我最终使用一个名为 categoryPicker_default.

的函数来构建类别选择器（我通常这样做，但为了简单起见，这里不 post ）

var categoryPickerArray = [];
for (var i = 0; i < categoryPickerColumns.length; i++) {
    categoryPickerArray.push(
        new google.visualization.ControlWrapper(categoryPicker_default(i)),
    );
};

然后以这种方式绑定到我的仪表板。

dashboard.bind(categoryPickerArray, [proxyTable]);

然后根据categoryPickerArray中的选择器数量动态构建事件监听器。

在 statechange lib_gcharts_categoryPickerState 被调用以收集更新。

for (let i = 0; i < categoryPickerArray.length; i++) {
    google.visualization.events.addListener(categoryPickerArray[i], 'statechange', function () {            
        lib_gcharts_categoryPickerState(categoryPickerArray[i]);
    });
};

然后使用categoryPickerState收集statechange之后的值。

var categoryPickerState = {};

function lib_gcharts_categoryPickerState(controlWrapper) {
    if (categoryPickerState.hasOwnProperty(controlWrapper.getContainerId())) {
        delete categoryPickerState[controlWrapper.getContainerId()];
    }
    categoryPickerState[controlWrapper.getContainerId()] = controlWrapper.getState();
}

感谢@WhiteHat 在之前的 post.

中介绍了这种收集值的方法

Google 可视化 getSelection() 不符合预期

Google Visualization getSelection() not as expected

javascript

charts

google-visualization