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は2Googleに電話する必要があります。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});
}