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

Question

我有一张由员工完成的不同时间（教学时间、服务时间和研究时间）的表格。我需要绘制员工的条形图和饼图，但 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 轴应显示教学时间、研究时间和服务时间，饼图和条形图图例也应反映这一点

Answer 1

如果你想要的话 --> 'teachinghours', 'servicehours', 'researchhours'

要在x轴上，那么数据需要按如下结构...

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

请参阅以下工作 sn-p...

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"]."],";
    } 
  ?>
]);