前端之家

  1. 首页
  2. 问答

Google图表连续获取数据

• 问答

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

我的代码显示了以下屏幕截图

Google图表连续获取数据

预期结果是条形图的x轴应显示教学时间，研究时间和服务时间，饼图和条形图图例也应反映出这一点

luxiaofeng_374 回答：Google图表连续获取数据

如果需要-> jq

要位于x轴上，则数据的结构需要如下所示... 

'teachinghours','servicehours','researchhours'

请参阅以下工作片段... 

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',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>
chartsgoogle-visualizationmysqlphp
本文链接：https://www.f2er.com/3152537.html

大家都在问