Question

在点击时，尝试获取所选PieChart切片的值时会遇到很大麻烦。

文档说：

selection_array：所选对象的数组，每个对象描述一个用于创建可视化的基础表中的数据元素（DataView或DataTable）。每个对象都有属性行和/或列，包含所选项的行和/或列的索引在底层的DataTable中。如果row属性为null，则为选择是一个列;如果列属性为null，那么选择是一排; 如果两者都是非null，则它是特定数据 * 项。您可以调用DataTable.getValue（） *方法来获取值所选项目。检索到的数组可以传入为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行聚合为两个类别。由于饼图的每个切片都指向一组聚合值，并且饼图只允许选择单个值，因此无法选择三行。

此外，您的类别选择器目前没有多大用处，因为如果您选择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
}

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

1 个答案: