從選定的谷歌圖表切片中獲取數據PieChart

Question

我試圖在點擊一個PieChart的選定片段時遇到很大麻煩。

文檔說：

selection_array：選擇對象的數組，每一個描述用於創建可視化 （一個DataView或數據表）的基礎表一個 數據元素。每個對象都具有屬性行和/或列，其中底層DataTable中所選項目 的行和/或列的索引。如果行屬性爲空，則選擇 是一列;如果column屬性爲空，那麼 選擇是一行; 如果兩者都非空，則它是具體數據 * item。您可以調用DataTable.getValue（） *方法獲取所選項目的值 。檢索到的陣列可以傳遞到 爲setSelection（）

在我的情況，我得到空從getSelection（），然後我不能想出怎樣做才能得到我想要的值（對應於列的標籤那片）。

任何答案會很apreciated :)

的什麼IM做的示例代碼：

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 
}