首先，不建议在同一个文件中混合使用 php 和 javascript
将 html / javascript 与 php 分开
使用ajax从php获取数据到javascript
对于 google 图表，请使用此处找到的 json 格式...
构造函数的 JavaScript 文字数据参数的格式 https://developers.google.com/chart/interactive/docs/reference#dataparam
这将允许您直接从 json 创建 google 数据表
获取数据.php
require_once 'db_connection.php';
header('Content-type: application/json');
$data = array();
$Chart = "SELECT *
FROM (
SELECT *,
@rn := if( @tag_name = tag_name,
@rn + 1,
if(@tag_name := tag_name, 1, 1)
) as tag_count
FROM waardes
CROSS JOIN ( SELECT @rn := 0, @tag_name := '') as vars
ORDER BY tag_name
) as T
WHERE tag_count < 11 AND machine_id LIKE 3 AND tag_name LIKE 'phone 4'
ORDER BY datetime DESC";
$result = mysqli_query($connection, $Chart);
$data = array();
$data['cols'] = array(
array('label' => 'Date', 'type' => 'string'),
array('label' => 'phone 4', 'type' => 'number')
);
$data['rows'] = array();
while ($row = mysqli_fetch_array($result)) {
if ($row["int_value"] == 0 && $row["real_value"] == 0.0 && $row["bool_value"] != "") {
$row = array();
$row[] = array('v' => (string) $row['datetime']);
$row[] = array('v' => (float) $row['bool_value']);
$data['rows'][] = array('c' => $row);
} elseif ($row["int_value"] == 0 && $row["real_value"] != 0 && $row["bool_value"] == "") {
$row = array();
$row[] = array('v' => (string) $row['datetime']);
$row[] = array('v' => (float) $row['real_value']);
$data['rows'][] = array('c' => $row);
} elseif ($row["int_value"] != 0 && $row["real_value"] == 0 && $row["bool_value"] == "") {
$row = array();
$row[] = array('v' => (string) $row['datetime']);
$row[] = array('v' => (float) $row['int_value']);
$data['rows'][] = array('c' => $row);
}
}
$data['rows'] = $rows;
echo json_encode($data);
JavaScript
google.charts.load('current', {
packages: ['line']
}).then(function () {
$.ajax({
url: 'getdata.php',
dataType: 'json'
}).done(function (jsonData) {
var data = new google.visualization.DataTable(jsonData);
var options = {
chart: {
title: 'Values'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(data, google.charts.Line.convertOptions(options));
}).fail(function (jq, text, errMsg) {
console.log(text + ': ' + errMsg);
});
});
这将为您提供更好的结构来处理多个图表/数据表
现在，如果您想在图表中使用真实日期，而不是字符串（如上面的 php 所示）
它将允许您使用图表选项，例如format，对于 x 轴
您可以将日期值作为字符串传递，格式如下：
使用日期字符串表示形式的日期和时间 https://developers.google.com/chart/interactive/docs/datesandtimes#dates-and-times-using-the-date-string-representation
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
为此，请将列类型更改为日期...
array('label' => 'Date', 'type' => 'date'),
然后在加载数据时，使用以下格式如上...
$rowDate = "Date(".date_format($row['datetime'], 'Y').", ".((int) date_format($row['datetime'], 'm') - 1).", ".date_format($row['datetime'], 'd').", ".date_format($row['datetime'], 'H').", ".date_format($row['datetime'], 'i').", ".date_format($row['datetime'], 's').")";
$row = array();
$row[] = array('v' => (string) $rowDate);
$row[] = array('v' => (float) $row['bool_value']);
$data['rows'][] = array('c' => $row);
注意：JavaScript 中的月份数字是从零开始的...
