我用 mysql 制作了一个工作图表，我想在我的第一个图表旁边制作另一个图表，但效果不佳。
我的代码
<?php
$con = mysqli_connect('xxxx','xxxx','xxxx','xxxx');
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
1234
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
///Start Chart
['Date', 'Total Orders'],
<?php
$query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
echo "['".$row['saleType']."',".$row['count']."],";
}
?>
///End Chart
]);
var options = {
title: 'Total Orders in 2017'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
chart.draw(data, options);
}
</script>
</head>
<body>
<h3>1234</h3>
<div id="columnchart" style="width: 600px; height: 500px;"></div>
</body>
</html>
这是我的图表，但我想再制作一张并排放置:
最佳答案
强烈建议不要在html/javascript中混合使用php...
相反，使用 php 以 json 格式返回数据...
getdata1.php
<?php
$query = "SELECT count(totalExcl) AS count, saleType FROM ps_oxoquotation_quotation WHERE date_add >= '2017-01-01 00:00:00' GROUP BY saleType";
$exec = mysqli_query($con,$query);
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Sale Type', 'type' => 'string'),
array('label' => 'Total Orders', 'type' => 'number')
);
while($row = mysqli_fetch_array($exec)){
$temp = array();
$temp[] = array('v' => (string) $row['saleType']);
$temp[] = array('v' => (int) $row['count']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
echo json_encode($table);
?>
然后使用jquery/ajax 从php 获取数据并绘制图表...
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
callback: function () {
// draw chart from php data
$.ajax({
url: 'getdata1.php',
dataType: 'json',
done: function (jsonData) {
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Total Orders in 2017'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart"));
chart.draw(data, options);
},
fail: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown + ': ' + textStatus);
}
});
// then just use another php page to get the other data and draw another chart
$.ajax({
url: 'getdata2.php',
dataType: 'json',
done: function (jsonData) {
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Total Other Orders in 2017'
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart2"));
chart.draw(data, options);
},
fail: function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown + ': ' + textStatus);
}
});
},
packages: ['corechart']
});
</script>
注意，也推荐使用loader.js加载库，对比 jsapi
<script src="https://www.gstatic.com/charts/loader.js"></script>
根据release notes ...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
关于php - Google 图表在彼此旁边添加另一个图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42230160/