解决方案：检查浏览器控制台后加载我的loader.js时出现拼写错误。
目前，我正在通过旧的加载程序库（jsapi）显示Google Charts，同时使用PHP使用来自MySQL的数据填充图表。
但是，由于需要多次调用SetOnLoadCallback而旧库无法执行，我需要转换为loader.js才能执行此操作。
问题是，当我切换到loader.js时，我的图表都没有显示，只是空白。下面是我的PHP和图表代码。
这是我使用旧库加载器的当前代码。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
//google.charts.load('current', {packages: ['corechart']});
//Chart (Hardest Topics decided by Students)
google.setOnLoadCallback(drawChart)
//google.charts.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '',
is3D: 'true'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
//Chart1 (Total Value of Students Frustration and Boredness)
google.setOnLoadCallback(drawChart1)
//google.charts.setOnLoadCallback(drawChart1);
function drawChart1() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable1?>);
var options = {
title: 'Students Frustration and Boredness Value',
is3D: 'true'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>
这是我新图表的代码。
<!-- Google Chart -->
<script type="text/javascript" sec="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
//Chart (Hardest Topics decided by Students)
google.charts.setOnLoadCallback(drawChart)
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: '',
is3D: 'true'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
//Chart1 (Total Value of Students Frustration and Boredness)
google.charts.setOnLoadCallback(drawChart1)
function drawChart1() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable1?>);
var options = {
title: 'Students Frustration and Boredness Value',
is3D: 'true',
legend: 'left'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>
<!-- Google Chart end-->
这是我的PHP，它获取用于填充我的图表的数据
<?php
$con=mysqli_connect("localhost","root","password") or die("Failed to connect with database");
mysqli_select_db($con, "tutor");
//MySQL query start
$sql="SELECT *
FROM googlechart";
$sql1="SELECT username, sum(frustratedINT), sum(boredINT)
FROM `selfreportfrustration`
WHERE frustrated = 'Y' OR bored = 'Y'
GROUP BY username";
//MySQL query end
//Result start
$result = mysqli_query($con,$sql) or die(mysqli_error($con));
$result1 = mysqli_query($con,$sql1) or die(mysqli_error($con));
//Result end
//Rows start
$rows = array();
$rows1 = array();
//Rows end
$flag = true;
//Table start
$table = array();
$table1 = array();
//Table end
//Table Column array start
$table['cols'] = array(
// Labels for your chart, these represent the column titles
// Note that one column is in "string" format and another one is in "number" format as pie chart only required "numbers" for calculating percentage and string will be used for column title
array('label' => 'Weekly Task', 'type' => 'string'),
array('label' => 'Percentage', 'type' => 'number')
);
$table1['cols'] = array(
array('label' => 'User', 'type' => 'string'),
array('label' => 'Frustrated', 'type' => 'number'),
array('label' => 'Bored', 'type' => 'number')
);
//Table Column array end
//Table Row array start
$rows = array();
while($r = mysqli_fetch_assoc($result)) {
$temp = array();
// the following line will be used to slice the Pie chart
$temp[] = array('v' => (string) $r['weekly_task']);
// Values of each slice
$temp[] = array('v' => (int) $r['percentage']);
$rows[] = array('c' => $temp);
}
$rows1 = array();
while($r1 = mysqli_fetch_assoc($result1)) {
$temp1 = array();
$temp1[] = array('v' => (string) $r1['username']);
$temp1[] = array('v' => (int) $r1['sum(frustratedINT)']);
$temp1[] = array('v' => (int) $r1['sum(boredINT)']);
$rows1[] = array('c' => $temp1);
}
//Table Row array end
//Table Row start
$table['rows'] = $rows;
$table1['rows'] = $rows1;
//Table Row end
//json start
$jsonTable = json_encode($table);
$jsonTable1 = json_encode($table1);
//echo $jsonTable;
//json end
?>
答案 0 :(得分：0)
我遇到Loader.js问题的原因是因为我将src拼写为秒......
这是愚蠢的，我应该检查浏览器控制台。之后我只花了3分钟就解决了。谢谢@WhiteHat和@dlaliberte