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

Question

我在尝试获取单击饼图所选切片的值时遇到了很大的麻烦。

文档说:

selection_array: An array of selected objects, each one describing a data element in the underlying table used to create the visualization (a DataView or a DataTable). Each object has properties row and/or column, with the index of the row and/or column of the selected item in the underlying DataTable. If the row property is null, then the selection is a column; if the column property is null, then the selection is a row; if both are non-null, then it is a specific data *item. You can call the DataTable.getValue()* method to get the value of the selected item. The retrieved array can be passed into setSelection()

在我的例子中，我从 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 行聚合为两个类别。由于饼图的每个切片都引用一组聚合值，而饼图只允许选择单个值，因此您无法通过这种方式选择三行。

此外，您的类别选择器目前并没有多大用处，因为如果您选择“城市”或“农村”，您最终会得到一个显示 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
}