Php 谷歌图表从一行中获取数据

我有一个由员工完成的不同时间（教学时间、服务时间和研究时间）的表格。我需要绘制员工的条形图和饼图，但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);

load（'current'，{'packages'：['bar']}）{
load（'current'，{'packages'：['bar']}）{
var barsButton=document.getElementById（'b1'）；
var pieButton=document.getElementById（'b2'）；
barsButton.onclick=函数（）{
drawSarahChart（“柱形图”）；
}
pieButton.onclick=函数（）{
drawSarahChart（“PieChart”）；
}
drawSarahChart（“柱形图”）；
});
功能图SarahChart（图表类型）{
var chart=new google.visualization.ChartWrapper({
集装箱船：“Sarah_chart_div”}）；
var data=google.visualization.arrayToDataTable([
[“教学小时”，“小时]，
如果您想要文字-->
'teachinghours'、'servicehurs'、'researchhours'

要在x轴上，则数据需要按以下方式进行结构

var data = google.visualization.arrayToDataTable([
  ['Type', 'Hours'],
  ['teachinghours', 1379],
  ['servicehours', 99],
  ['researchhours', 247]
]);

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
['类型'，'小时']，
[teachinghours'，1379]，
[servicehours'，99]，
[‘研究时间’，247]
]);
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.ColumnChart（容器）；
变量选项={
标题：“2018财年”，
宽度：400，
身高：300，
图例：{位置：'top'，对齐：'start'}，
工具提示：{isHtml:true}
};
图表绘制（数据、选项）；
})；
如果我将格式设置为表中的类型，我的数据库将大3倍，这在我的情况下是不可行的。是否有办法在“while（$row=mysqli\u fetch\u array（$res））”中回显名称？
<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();

var data = google.visualization.arrayToDataTable([
  ['Type', 'Hours'],
  ['teachinghours', 1379],
  ['servicehours', 99],
  ['researchhours', 247]
]);