/ / Google Chartの複数のインスタンス-javascript、jquery

Google Chartsの複数のインスタンス - javascript、jquery

Googleチャートの2つのインスタンスを取得しようとしていますが、最後の1つだけが表示されています。

ここにコードです:

// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
chart.draw(data, {width: 400, height: 240});

}


//Chart 2

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

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

function drawChart() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data2 = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart2 = new google.visualization.PieChart(document.getElementById("chart_div2"));
chart2.draw(data2, {width: 400, height: 240});

}

ここで私が間違っているのは何ですか?

回答:

回答№1は2

Googleに電話する必要があります。load( "visualization"、 "1"、{"packages":["corechart"]}); 1回だけ。すべてのdrawchart()関数を再グループ化する初期化関数を持つことをお勧めします。下記参照。それとは別に、あなたのコードは見栄えが良く、動作するはずです。

// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initialize);

function initialize() {
drawChart();
drawChart2();
}


function drawChart() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById("chart_div"));
chart.draw(data, {width: 400, height: 240});

}



function drawChart2() {
var jsonData = $.ajax({
url: "charts/getData.php",
dataType:"json",
async: false
}).responseText;

// Create our data table out of JSON data loaded from server.
var data2 = new google.visualization.DataTable(jsonData);

// Instantiate and draw our chart, passing in some options.
var chart2 = new google.visualization.PieChart(document.getElementById("chart_div2"));
chart2.draw(data2, {width: 400, height: 240});

}