전달한 데이터를 기반으로 Google 차트를 다시 그리게하려면 어떻게해야합니까?

Question

구글 차트를 보여주는 예제의 대부분은 간단한 배열을 가지고 있습니다 ...

내 서버에서 배열을 가져와야합니다.

그리기 위해 원형 차트를 얻을 수는 있지만 업데이트되지는 않습니다. 여기

는 유연하고 다시 그릴 파이 차트 얻을 나의 시도 : 내 자바 스크립트의 상단에

,하지만 document.ready 전에 :

google.load("visualization", "1", {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 

내 drawChart 기능 :

function drawChart(arrFeedbackResult3) { 
    console.log('Draw a fucking chart ... ') + console.log(arrFeedbackResult3); 

    var chart_data = new google.visualization.DataTable(arrFeedbackResult3); 
    var options = { 
    title: 'Comments by Group', 
    sliceVisibilityThreshold: 1/20, // Only > 5% will be shown. 
    width: 400, 
    height: 400 
    }; 

    chart = new 
    google.visualization.PieChart(document.getElementById('groupPieChartDiv')); 
    chart.draw(chart_data, options); 
    // chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv')); 
    // chart.draw(data, options); 
} 

그리고 버튼을 클릭 한 후 새로운 데이터를 drawChart에 전달하는 기능 :

function setupFeedback3(arrFeedbackResult3){ // Create Group summary Graphs 

    console.log('Groups summary from DB: ') + console.log(arrFeedbackResult3); 

    drawChart(arrFeedbackResult3); 
} // END setupFeedback3 

위 코드를 사용하면 내 페이지에 "테이블에 열이 없습니다"라는 메시지가 표시됩니다.

배열 arrFeedbackResult3은 코드가 바뀌었지만 새로 고침 기능이 없어도 제대로 끝나고 차트를 렌더링합니다.

도움을 주시면 감사하겠습니다. 나는 Google 차트를 사용하는 기본적인 흐름을 놓치고 있다고 생각한다. 콜백을 사용해야하는 방법과 장소.

---

매우 관대하고 자세한 답장을 보내 주시면 다음 번에 업데이트 할 예정입니다.

내 js는 html과 별도의 파일에 있습니다. 콜백을 통해 배열을 전달할 수 없습니다. 나는 "생성자가 아니다"오류 또는 "함수가 아니다"를 얻는다. 괄호 값을 추가하면 코드가 손상되므로 생각합니다.

나는 또한 대답에 document.ready에 대한 의견을 이해하지 못한다. 나는 다른 모든 기능을로드하기 위해 document.ready를 유지했다.

오른쪽 document.ready 후 내가 가진 내 DB를 POST 데이터를 얻을 후

google.charts.load('current', { 
    packages:['corechart'], 
    callback: drawChart 
}); 

다음, 내가 전화 :

function setupFeedback3(result){ // Create Group summary Graphs 
    arrFeedbackResult3 = result; //Store in global variable for access by chart 
    drawChart(); 
} // END setupFeedback3 

arrFeedbackResult3는 GLOBAL 변수 - 유일한 방법 내가 얻을 수 그리기 차트 기능에 데이터. 그런 다음

:이 작동하며, 서로 다른 데이터 피드로 차트가 업데이 트를 수행하지만 문제의 겉만 번지르르 한 상태를 보인다

function drawChart() { 
    console.log('Draw a chart ... ') + console.log(arrFeedbackResult3); 

    // var chart_data = new google.visualization.DataTable(arrFeedbackResult3); 
    var chart_data = google.visualization.arrayToDataTable(arrFeedbackResult3); 

    var options = { 
    title: 'Comments by Group', 
    sliceVisibilityThreshold: 1/20, 
    width: 400, 
    height: 400 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv')); 
    chart.draw(chart_data, options); 
} 

. 어리석은 간단한 예제 나 함수 내에서 AJAX를 사용하여 데이터를 전달하는 구체적인 예가 실제로 도움이되었을 것입니다.

Answer 1

먼저, 라이브러리를로드jsapi를 사용하지 좋습니다.

에 따르면 release notes ...

jsapi 로더를 통해 사용할 수있는 Google Charts의 버전은 더 이상 일관되게 업데이트되지 않습니다. 새로운 액세서리 인 loader.js을 사용하십시오. 이 만 load 문을 변경합니다

<script src="https://www.gstatic.com/charts/loader.js"></script> 

...

이

google.charts.load('current', {packages:['corechart']}); 

---

다음, 콜백 부하 문에 추가 할 수 있습니다 ...

google.charts.load('current', { 
    packages:['corechart'], 
    callback: drawChart 
}); 

또는 당신은 반환 약속을 사용할 수 있습니다 ... 또한

google.charts.load('current', { 
    packages:['corechart'] 
}).then(drawChart); 

이 문서까지 대기 부하 문이 기본적으로 준비가되어 있습니다, 그래서
가 대신 사용할 수 있습니다 ->$(document).ready

데이터 테이블을 생성 할 때

---

마지막는 생성자
인수 JSON,
보지 간단한 배열되어야 Format of the Constructor's JavaScript Literal data Parameter, 특정 JSON 형식

간단한 배열에서 데이터 테이블을 만들려면,
사용 static method ->arrayToDataTable

---

는

는 다음과 같은 설정 ...

추천

google.charts.load('current', { 
    packages:['corechart'] 
}).then(function() { 
    // get data 
    drawChart(arrayData); 
}); 

function drawChart(arrayData) { 
    var chart_data = google.visualization.arrayToDataTable(arrayData); 

    var options = { 
    title: 'Comments by Group', 
    sliceVisibilityThreshold: 1/20, 
    width: 400, 
    height: 400 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv')); 
    chart.draw(chart_data, options); 
} 

function setupFeedback(arrayData) { 
    // get data 
    drawChart(arrayData); 
} 

---

UPDATE

당신이 콜백으로 부하 문 반환 및 아래와 같이
그냥 코드를 이동 준비 문서 ...

는 당신이 얻을 수 있도록 아약스 전화를로드 할 수 있습니다 약속을 사용할 수 있습니다 데이터

정말

google.charts.load('current', { 
    packages:['corechart'] 
}).then(function() { 

    // move code from document ready here 

    // get data 
    getData(); 

}); 

function getData() { 
    $.ajax({ 
    type: 'POST', 
    contentType: 'application/json', 
    url: sourceURL, 
    success: setupFeedback 
    }); 
} 

function setupFeedback(result) { 
    // you could draw the chart here 
    // just move the code from drawChart 

    // or pass the data along to another function 
    drawChart(result); 
} 

function drawChart(result) { 
    var chart_data = google.visualization.arrayToDataTable(result); 

    var options = { 
    title: 'Comments by Group', 
    sliceVisibilityThreshold: 1/20, 
    width: 400, 
    height: 400 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('groupPieChartDiv')); 
    chart.draw(chart_data, options); 
}