谷歌線圖表轉換的TimeOfDay進行編號

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

看到 - >working with timeofday

數據表'timeofday'列的數據類型需要一個3或4個數字組成的數組，代表小時數，分鐘數utes，seconds和可選的毫秒。

這意味着對於'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>

EDIT

根據 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; 
}