谷歌折线图将时间转换为数字

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

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]

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

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