从谷歌图表 PieChart 的选定切片中获取数据

Question

当点击饼图时，我在尝试获取选定切片的值时遇到了很大的麻烦。

文档说：

selection_array：一组选定对象，每个对象描述一个 用于创建可视化的基础表中的数据元素 （数据视图或数据表）。每个对象都有属性行和/或 列，带有所选项目的行和/或列的索引 在基础数据表中。如果 row 属性为空，则 选择是一列；如果列属性为空，则 选择是一行； 如果两者都不为空，则为特定数据 *项目。您可以调用 DataTable.getValue()* 方法来获取 选定的项目。检索到的数组可以传入 设置选择（）

在我的情况下，我从 getSelection() 得到 null，然后我无法弄清楚如何获得我想要的值（对应于该切片的列的标签）。

任何答案都会非常感激:)

我在做什么的示例代码：

google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);

var data;
var pie_area;

function drawVisualization() {
  // Prepare the data
  data = google.visualization.arrayToDataTable([
    ["rbd", "nombre", "area", "dependencia", "simceMat", "ubicacionLon", "ubicacionLat", "simceLen", "nivel"],
    [22616, "Colegio Mozart", "Urbana", "Part_Sub", 228, -72.981148, -41.479872, 254, "Basico"],
    [22686,"Escuela Basica Camelias","Urbana","Muni",228,-72.980075,-41.474599,253, "Medio"],
    [40351,"Colegio Bosquemar","Urbana","Part_Sub",290,-72.981148,-41.479872,280, "Medio"],
    [7633,"Escuela Capitan Arturo Prat Chacon","Urbana","Muni",317,-72.909565,-41.474567,314, "Basico"],
    [7659,"Escuela Rural Alerce","Rural","Muni",230,-72.91767,-41.399121,249, "Basico"],
    [7671,"Escuela Rural Lagunitas","Rural","Muni",261,-72.964282,-41.459485,269, "Medio"],
    [7690,"Escuela Rural Rio Blanco","Rural","Muni",217,-72.638597,-41.455786,229, "Medio"],
    [7700,"Colegio San Francisco Javier","Urbana","Part",305,-72.942089,-41.470351,303, "Basico"],
    [7717,"Instituto Aleman de Puerto Montt","Urbana","Part",321,-72.932482,-41.470001,310, "Medio"],
    [7718,"The American School","Urbana","Part",317,-72.909,-41.456,314, "Medio"]
  ]);

  var fltArea = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'f1',
    'options': {
      'filterColumnLabel': 'area',
      'ui': {
      'labelStacking': 'vertical',
        'allowTyping': false,
        'allowMultiple': false
      }
    }
  });

  pie_area = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart2',
      'options': {
        'width': 300,
        'height': 300,
        'legend': 'none',
        'title': 'Area',
        'pieSliceText': 'label'
      },
      'view': {'columns': [2]}
    });

  new google.visualization.Dashboard(document.getElementById('dashboard')).bind([fltArea], [pie_area]).draw(data);
  google.visualization.events.addListener(pie_area, 'select', onAreaSliceSelected);

}

function onAreaSliceSelected(){
  var sel = pie_area.getChart().getSelection(); //is always null
  console.log('you selected '+sel); //displays you selected null
}

Answer 1

问题在于您的图表/数据是如何设置的。

您目前正在汇总第 2 列中的所有数据以生成图表。在本例中，您的值有 7 个 Urbana 和 3 个 Rural，因此它将这 10 行聚合为两个类别。由于饼图的每个切片都引用一组聚合值，而饼图只允许选择单个值，因此您无法通过这种方式获得三行的选择。

此外，您的类别选择器目前并没有提供太多用途，因为如果您选择 Urbana 或 Rural，您最终会得到一个饼图，显示 100% 的单个类别。

如果您以不同的方式设置数据，则无论何时选择一个切片，您都会正确地获得一个对象数组，如下例所示：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['Work', 11],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 7]
  ]);

  // Create and draw the visualization.
  pieChart = new google.visualization.PieChart(document.getElementById('visualization'));
  pieChart.draw(data, {title:"So, how was your day?"});
  google.visualization.events.addListener(pieChart, 'select', onAreaSliceSelected);
}

function onAreaSliceSelected(){
  var sel = pieChart.getSelection(); //is always null
  alert('you selected '+sel); //displays you selected null
}