我有一个如下所示的表格:
sub_note | item_amount | sub_cat |
---------------------------------------|
Spotify | $5.99 | entertainment |
Vodafone | $35 | phone |
Netflix | $5.99 | entertainment |
我想显示一个谷歌饼图,告诉我每个类别(即娱乐、电话等)花了多少钱。
我使用了以下对Google快速入门示例的改编,但我看到的只是一个带有"无数据"的空白图表。
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Total');
data.addRows([
<?php
$query = "SELECT SUM(sub_amount) AS sub_cat, subs_total FROM subscriptions WHERE sub_user_id ='".$user_id."' GROUP BY sub_cat ORDER BY sub_cat";
$exec = mysqli_query($connect,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['sub_cat']."',".$row['subs_total']."],";
}
?>]);
// Set chart options
var options = {'title':'Spending by Category',
'width':600,
'height':400};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
很明显,查询代码及其分组方式有问题,但我正在努力解决这个问题。
任何指示都会很棒!
更新:感谢 SQL 更正的@WhiteHat,以下是功能代码:
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Total');
data.addRows([
<?php
$query = "SELECT sub_cat, SUM(sub_amount) as subs_total FROM subscriptions WHERE sub_user_id ='".$user_id."' GROUP BY sub_cat ORDER BY sub_cat";
$exec = mysqli_query($connect,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['sub_cat']."',".$row['subs_total']."],";
}
?>]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':600,
'height':400};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
试试这个sql...
$query = "SELECT sub_cat, SUM(sub_amount) as subs_total FROM subscriptions WHERE sub_user_id ='".$user_id."' GROUP BY sub_cat ORDER BY sub_cat";
第一列,小计应为第二列。
请您测试您的 sql 代码是否返回某些内容?如果您在SQL中给我正确的数据集,我会为您提供帮助。尝试在javascript之外做一个echo
或vardump
,以了解你的SQL是否良好。