Google图表彼此相邻添加另一个图表 [英] Google chart add another chart next to each other
本文介绍了Google图表彼此相邻添加另一个图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用mysql制作了一张工作图表，我想在第一张图表旁边制作另一张图表，但效果并不理想。
我的代码
<？php
$ con = mysqli_connect（'xxxx'，'xxxx'，'xxxx'，'xxxx'）;
？>
<！DOCTYPE HTML>
< html>
< head>
< meta charset =utf-8>
< title>
1234
< / title>
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（visualization，1，{packages：[corechart]}）;
google.setOnLoadCallback（drawChart）;
函数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']。]，;
}
？>
///结束图
]）;
var options = {
title：'2017年总订单'
};
var chart = new google.visualization.ColumnChart（document.getElementById（columnchart））;
chart.draw（data，options）;
}
< / script>
< / head>
< body>
< h3> 1234< / h3>
< div id =columnchartstyle =width：600px; height：500px;>< / div>
< / body>
< / html>
这是我的图表，但我想让另一个相邻：
强烈推荐不在 html / javascript 内混合 php ... 使用 php 以 json 格式返回数据...
$ b getdata1.php p>
<？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）;
}
$表['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（）{
//从PHP数据中绘制图表
$ .ajax（{
url ：'getdata1.php'，
dataType：'json'，
完成：function（jsonData）{
var data = new google.visualization.DataTable（jsonData）;
var options = {
title：'2017年总订单'
};
var chart = new google.visualization.ColumnChart（document.getElementById（columnchart））;
图表.draw（data，options）;
}，
fail：function（jqXHR，textStatus，errorThrown）{
console.log（errorThrown +'：'+ textStatus）;
}
$ b //然后只需使用另一个php页面来获取其他数据并绘制另一个图表
$ .ajax（{
url：'getdata2 .php'，
dataType：'json'，
完成：function（jsonData）{
var data = new google.visualization.DataTable（jsonData）;
var options = {
title：'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 加载库，而
< script src =https://www.gstatic.com/charts/loader.js>< / script>
...
通过jsapi加载器保持可用的谷歌图表版本不再持续更新。请从现在开始使用新的gstatic loader。
I made a working chart with mysql and I want to make another chart next to my 1st chart but it does not go well.
my code
<?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>
This is my chart but i want to make another one next to each other:
解决方案
highly recommend not mixing php within html / javascript...
instead, use php to return the data in json format...
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);
?>
then use jquery / ajax to get the data from php and draw the chart...
<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>
note, also recommend using loader.js to load the library, vs. jsapi
<script src="https://www.gstatic.com/charts/loader.js"></script>
according to the 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.
这篇关于Google图表彼此相邻添加另一个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
