javascript - Google折线图将时间转换为数字

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

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>

最佳答案

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

关于javascript - Google折线图将时间转换为数字，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46667100/