2013-12-19 2 views
0

대시 보드에서 클릭 가능한 차트를 구현하려고합니다. 사용자가 클릭 한 원형 차트의 세그먼트를 기반으로 다른 웹 페이지로 리디렉션됩니다. 그러나 ChartWrapper 개체에서 getChart() 사용할 때 chartObject NULL입니다. ChartWrapper에서 DataTable을 꺼내는 데 아무런 문제가 없습니다.ChartWrapper.getChart()가 null을 반환합니다.

내 코드에서 '선택'이벤트 전에 '준비'이벤트를 사용하려고했지만 여전히 NULL을 얻습니다. 어떤 충고?

당신은 당신의 차 문제는 당신이 각는, PieChart 데이터의 1 열을 전달하는 것입니다 코드 here

// Define a Pie chart 3 
    pie3 = new google.visualization.ChartWrapper({ 
     'chartType': 'PieChart', 
     'containerId': 'chart3', 
     'options': { 
     //'width': 400, 
     'height': 300, 
     'legend': {'position':'right', 'textStyle': {fontSize: 9}}, 
     'title': 'Audit Type', 
     'chartArea': {'left': 80, 'top': 30, 'right': 0, 'bottom': 0, 'height':300, 'widith':200}, 
     'pieSliceText': 'value', 
     'slices': {0: {color: '#9fbfdf'}, 1: {color: '#6699cc'}, 2: {color: '#3973ac'}, 3: {color: '#738b28'}, 4: {color: '#a4c639'}, 5: {color: '#bfd774'}}, 
     'fontSize': 11 
     }, 
     // from the 'data' DataTable. 
     'view': {'columns': [6]} 
    }); 

    google.visualization.events.addListener(pie3, 'ready', onReady); 

    // Create a dashboard 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
     // Establish bindings, declaring the both the slider and the category 
     // picker will drive both charts. 
     bind([yearPicker, slider2, categoryPicker], [pie, pie2, pie3]). 
     // Draw the entire dashboard. 
     draw(data); 

    function onReady() { 
     google.visualization.events.addListener(pie3.getChart(), 'select', handler); 
    } 

    function handler() { 
     chartObject = pie3.getChart().getSelection(); 
     alert(chartObject); 
    } 

    } 


    google.setOnLoadCallback(drawVisualization); 
+0

코드를 기반으로 작성한 필인은 http://jsfiddle.net/asgallant/hKj7g/입니다. 전체 자바 스크립트 코드 또는 문제를 보여주는 예제에 대한 jsfiddle 링크로 게시물을 업데이트 할 수 있습니까? – asgallant

+0

jsfiddle을 전체 코드로 업데이트했습니다. 세 번째 원형 차트를 클릭하십시오. null를 돌려줍니다. –

+0

새로운 jsfiddle 링크는 무엇입니까? – asgallant

답변

1

을 시도 할 수 있습니다. PieCharts는 두 개의 데이터 열, 즉 원형 조각 레이블의 경우 문자열 1 개, 원형 조각 값의 경우 1 개의 숫자 열이 있어야합니다. 각 PieChart에 두 번째 데이터 열을 추가해야합니다.

이외에도 차트 코드를 $(document).ready(function() {...}); 처리기 외부로 옮기고 릴리스 후보 버전을로드해야하는 특별한 이유가없는 한 1.1 대신 API의 버전 1을로드해야합니다. 일반적으로 코드는 다음과 같이 구성해야합니다.

$(document).ready(function() { 
    // do stuff on document ready 
}); 
function drawVisualization() { 
    // draw dashboard 
} 
google.load('visualization', '1', {packages: ['controls'], callback: drawVisualization}); 
+0

각 파이 슬라이스는 올바르게 차트를 그리려면 값이 필요합니다. 값은 두 번째 데이터 열에 의해 지정됩니다. 귀하의 데이터에는 "내부"및 "외부"감사 유형이 있지만 값이 없습니다. 파이의 몇 퍼센트가 "외부"가되어야합니까? 데이터를 제공하지 않으면 차트에서 어떻게 알 수 있습니까? – asgallant

+0

차트는 테이블에 나타난 "외부"행 수에 대한 내 DataTable의 계산을 수행합니다. 링크에서 볼 수 있듯이, PieChart는 1 열의 데이터 만 전달하여 "외부"이벤트의 총 수를 표시 할 수 있습니다. 데이터 열 두 개를 전달하여 제안을 시도했습니다. 실제로 작동합니다. 필자는 DataTable의 구조를 재구성하여 파이 차트의 대시 보드 컨트롤과 무결성에 영향을 미치지 않도록 어떻게 생각해야할까요? –

+0

그것은 당신이 원하는 것을하지 않습니다. 데이터에는 2 개의 "외부"감사와 1 개의 "내부"감사가 있지만 PieChart에는 각각 1 개씩 표시됩니다. 그룹화 함수 ([google.visualization.data.group] (https://developers.google.com/chart/interactive/docs/reference#google_visualization_data_group))를 사용하여 각각의 수를 구한 다음 그룹의 결과에 근거한 차트. 또한 컨트롤을 연결하고 있기 때문에 컨트롤이 상태가 바뀔 때마다 데이터를 재 그룹화해야하기 때문에이 작업은 좀 더 복잡해집니다. – asgallant

관련 문제