Google Line Chart将timeofday转换为number

Question

我在折线图上工作，但是存在无法更改此行格式的问题：

function drawChart(){ var data = new google.visualization.DataTable(); data.addColumn('timeofday','quartal');

我想在水平轴上使用简单的数字格式（1,2,3,4作为四分之一），但当我将其更改为“数字”时，图表会消失。

第二个问题在于图表通过悬停线条'NaN：NaN'来显示。我认为这也是由错误的格式引起的。

JSON格式是：4 [1，0,1]，[[2]，1,1]，[[3]，1,1]，[[4]，2,8]

无法理解为什么上面的1，[2]，[3]，[4]不能是数字。

这是我的实际图表：

我有以下代码：

<?php 
$conn = new mysqli($servername, $username, $password, $dbname);

$qry = "SELECT COUNT(CASE WHEN name_Gleitzeitrahmen = 'Ja' THEN 1 END) as Ja,COUNT(CASE WHEN name_Gleitzeitrahmen = 'Nein' THEN 1 END)as Nein,quarter(datum) as quartal FROM dashboard GROUP BY quartal";
$result = $conn->query($qry);

if($result === FALSE) {
echo mysqli_errno($result) .": ". mysqli_error($result) ."/n";
die(mysqli_error());
}
$i = 0; //iteration counter - start at 0

$totalRows = mysqli_num_rows($result); // we need this to know when to change the output
$targetRows = $totalRows - 1; //row indies start from 0, not 1.

foreach ($result as $row){ 

  //$comTime = str_replace(":",",",$row['quartal']); // for each row, remove the : and put , in its place -> nur wenn Zeitformat vorhanden
    $comTime = $row['quartal'];
    if ($targetRows == $i) { // if the index is the same value as the target (ie, it's the last row)...

        $temp = "[[".$comTime."],".($row['Ja']).",".($row['Nein'])."]". PHP_EOL;
        } else {
        $temp = "[[".$comTime."],".($row['Ja']).",".($row['Nein'])."],". PHP_EOL;
        }
    $i = $i + 1; 
    $rows[] = $temp; 
}

$table = $rows;
$data = implode($table); //format the table as a single string, with line returns

echo $i;
echo $data;

?>



<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart(){
    var data = new google.visualization.DataTable();
        data.addColumn('timeofday','quartal'); //
        data.addColumn('number','Ja'); //Typ number
        data.addColumn('number','Nein');
        data.addRows([              
            <?php echo $data; ?> //dump the result into here, as it's correctly formatted   
        ]);

    var options = {
        title: 'Recorded Temperatures',
        legend: { position: 'top' },
        width: 900,
        height: 500,
        hAxis: { format:'hh:mm:ss'},
        hAxis: { gridlines: { count: 4 } }

    }; 

var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);    
  }
</script>

Answer 1

参见 - ＆gt; working with timeofday

  

DataTable 'timeofday'列数据类型采用3或4个数字的数组，分别表示小时，分钟，秒和可选的毫秒。

表示'timeofday'的值必须是至少包含3个值的数组...

数据需要看起来像这样...

[[1,0,0],1,1], [[2,0,0],1,1], [[3,0,0],1,1], [[4,0,0],2,8]

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday','quartal');
  data.addColumn('number','Ja');
  data.addColumn('number','Nein');
  data.addRows([
    [[1,0,0],1,1], [[2,0,0],1,1], [[3,0,0],1,1], [[4,0,0],2,8]
  ]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

根据折线图的data-format，
x轴可以是任何有效的列类型

更改为'number' ...

data.addColumn('number','quartal');

意味着删除第一列数据的内部数组......

[1,1,1], [2,1,1], [3,1,1], [4,2,8]

php需要更改为......

if ($targetRows == $i) {
  $temp = "[".$comTime.",".($row['Ja']).",".($row['Nein'])."]". PHP_EOL;
} else {
  $temp = "[".$comTime.",".($row['Ja']).",".($row['Nein'])."],". PHP_EOL;
}