Google 차트의 선택된 조각에서 데이터를 가져옵니다. PieChart

Question

클릭하면 PieChart의 선택된 조각의 가치를 얻으려고 애쓰는 데 큰 어려움이 있습니다.

설명서를 말한다

selection_array : 선택된 개체의 배열 시각화 (a DataView를 또는 DataTable에)을 생성하는 데 사용되는 기본 테이블에 데이터 요소를 설명하는 각. 각 개체에는 기본 DataTable에 선택된 항목 의 행 및/또는 열의 인덱스가있는 속성 행 및/또는 열이 있습니다. row 속성이 null이면 선택 항목이 열입니다. column 프로퍼티가 null의 경우, 의 선택은 행입니다. 둘 다 null이 아니면 특정 데이터 * 항목입니다. DataTable.getValue() * 메서드를 호출하여 값을 가져올 수 있습니다. 검색된 배열 setSelection() 내 경우에는

내가 대해 getSelection (에서 널 수)로 전달 될 수있다, 그럼 난 내가 원하는 값 (열이에 대응하는 라벨을 얻기 위해 무엇을 알아낼을 couldnt 그 슬라이스).

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

문제는 차트/데이터 설정 방법에 있습니다

은 모든 대답은 매우 :)

메신저 뭘의 예제 코드를 apreciated 될 것입니다.

현재 차트를 생성하기 위해 2 열의 모든 데이터를 집계하고 있습니다. 이 경우 7 개의 Urbana와 3 개의 Rural 값이 있으므로 10 개의 행을 두 개의 범주로 집계합니다. 원형의 각 슬라이스는 집합 값 집합을 참조하고 원형 차트는 단일 값만 선택할 수 있으므로 3 행을 선택할 수 없습니다.

또한 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 
}