我有一张由工作人员完成的不同时间(教学时间、服务时间和研究时间)的表格。我需要绘制员工的条形图和饼图,但 x 轴和图例只是时间的重复
sql语句后的sql数据示例
$query ="SELECT teachinghours ,servicehours ,researchhours
FROM staff_hour sh , staff s
WHERE s.staffid = sh.staffid
AND `staffperiodyear`= 'FY2018'
AND s.staffid in (SELECT s.staffid from staff s where s.username = '$staffid1')";
$res=mysqli_query($connect,$query);
| teachinghours | servicehours | researchhours |
|---------------------|------------------|-----------------|
| 1379 | 99 | 247 |
|---------------------|------------------|-----------------|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']}).then(function() {
google.charts.load('current', {'packages':['bar']}).then(function() {
var barsButton = document.getElementById('b1');
var pieButton = document.getElementById('b2');
barsButton.onclick = function() {
drawSarahChart('ColumnChart');
}
pieButton.onclick = function() {
drawSarahChart('PieChart');
}
drawSarahChart('ColumnChart');
});
function drawSarahChart(chartType) {
var chart = new google.visualization.ChartWrapper({
containerId: 'Sarah_chart_div'});
var data = google.visualization.arrayToDataTable([
['teachinghours','Hour'],
<?php
while($row=mysqli_fetch_array($res))
{
echo "['".$row["servicehours"]."', ".$row[1]."],";
echo "['".$row["teachinghours"]."', ".$row[0]."],";
echo "['".$row["researchhours"]."', ".$row[2]."],";}
?>]);
var options = {
title: 'FY 2018',
width: 400,
height: 300,
legend: { position: 'top', alignment: 'start' },
tooltip: { isHtml: true }
};
chart.setOptions(options);
chart.setChartType(chartType);
chart.setDataTable(data);
chart.draw();
我的代码显示了下面的截图 预期结果是条形图的x轴应该显示教学时间、研究时间和服务时间,饼图和条形图图例也应该反射(reflect)这一点
最佳答案
如果你想要的话 --> 'teachinghours', 'servicehours', 'researchhours'
要在x轴上,那么数据需要结构如下...
var data = google.visualization.arrayToDataTable([
['Type', 'Hours'],
['teachinghours', 1379],
['servicehours', 99],
['researchhours', 247]
]);
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Type', 'Hours'],
['teachinghours', 1379],
['servicehours', 99],
['researchhours', 247]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
var options = {
title: 'FY 2018',
width: 400,
height: 300,
legend: { position: 'top', alignment: 'start' },
tooltip: { isHtml: true }
};
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
编辑
至于加载数据表,你可以简单地硬编码列名...
var data = google.visualization.arrayToDataTable([
['teachinghours','Hour'],
<?php
while($row=mysqli_fetch_array($res))
{
echo "['servicehours', ".$row["servicehours"]."],";
echo "['teachinghours', ".$row["teachinghours"]."],";
echo "['researchhours', ".$row["researchhours"]."],";
}
?>
]);
关于php - Google 图表从一行中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58729399/