PHP 및 JavaScript를 사용하여 동적으로 Google 차트 업데이트
-
19-09-2019 - |
문제
나는 Google 차트를 가지고 있습니다( Google 시각화 API, 아니다 구글 차트 API) 페이지 로드 시 채워집니다.그런 다음 사용자는 여러 드롭다운 메뉴에서 옵션을 선택할 수 있습니다.사용자가 자신의 선택에 따라 Google 차트를 업데이트할 수 있기를 바랍니다.
사용자가 다양한 옵션을 선택한 후 MySQL을 통해 새 데이터를 가져오는 PHP 코드를 이미 만들었습니다.
질문:현재 그래프를 교체해야 합니까?아니면 그래프를 업데이트하기 위해 JavaScript 함수를 만들어야 합니까?
내 Google 차트 JavaScript 코드는 다음과 같습니다.
google.load("visualization", "1", {packages:["columnchart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Cluster');
data.addColumn('number', 'Loans');
data.addColumn('number', 'Lines');
/* create for loops to add as many columns as necessary */
var len = (encoded_cluster_name.length)-27; // encoded_line_volume.length;
data.addRows(len);
for(i=0; i<len; i++) {
var lines = (encoded_line_volume[i])/100000;
var loans = (encoded_loan_volume[i])/100000;
data.setValue(i, 0, ' '+encoded_cluster_name[i]+' '); /* x-axis */
data.setValue(i, 1, loans); /* Y-axis category #1*/
data.setValue(i, 2, lines); /* Y-axis category #2*/
}
/*********************************end of loops*****/
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(data, {
width: 600,
height: 300,
is3D: true,
title: 'Prospect Population',
legend: 'right'
});
}
해결책
차트를 교체하는 대신 데이터만 업데이트하겠습니다.그리고 차트를 다시 그려달라고 요청하세요.
다음을 수정할 수 있습니다. 놀이터 예 이것을 테스트하기 위해.
다음과 같습니다.
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
// Create and draw the visualization.
var v=new google.visualization.ColumnChart(
document.getElementById('visualization')
);
v.draw(data, null);
// Pretend update data triggered and processed
data.setCell(2, 1, 860);
v.draw(data, null);
}
제휴하지 않습니다 StackOverflow