我有一个谷歌折线图,它从 MySQL 数据库中提取数据。 第一列采用时间戳格式,即“1999-06-15 20:49:00”,并沿折线图的水平轴显示。 我遇到的问题是我无法将上述时间戳显示为年份,即水平轴上的“1999”而不是“1999-06-15 20:49:00”。
我的图表选项中有以下代码行
hAxis: {title: 'Year', format: 'yyyy'},
,我认为这会给我在水平轴上格式化为“yyyy”的日期。但是日期仍然以上述格式显示,即 yyyy-mm-dd hh :mm:ss 沿水平轴而不是 yyyy。
我的折线图代码如下:
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']}).then(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
//['class Name','Highest Annual Observed Tide','Highest Astronomical Tide','Highest Annual Predicted Tide','Number of High Tides > HAT'],
['Data',{type: 'number', label: 'Highest Annual Observed Tide'}, {type: 'number', label: 'Highest Astronomical Tide'},{type: 'number', label: 'Highest Annual Predicted Tide'},{type: 'number', label: 'Number of High Tides >= HAT'}],
<?php
$con = mysqli_connect('localhost','sealevel_Temp','Stackoverflow','sealevel_NZ');
$query = "SELECT * FROM `Tides` WHERE Location = 'Auckland'";
$exec = mysqli_query($con,$query);
while($row = mysqli_fetch_array($exec)){
//echo "['".date("Y",strtotime($row['Timestamp']))."',".$row['Highest Annual Observed Tide'].",".$row['Highest Astronomical Tide'].",".$row['Highest Annual Predicted Tide'].",".$row['Observed High Tides > HAT']."],";
echo "['".$row['Timestamp']."',".$row['Highest Annual Observed Tide'].",".$row['Highest Astronomical Tide'].",".$row['Highest Annual Predicted Tide'].",".$row['Observed High Tides > HAT']."],";
}
?>
]);
var formatMSL = new google.visualization.NumberFormat({pattern: '# mm'});
// format MSL data into mm.
formatMSL.format(data, 1);
formatMSL.format(data, 2);
formatMSL.format(data, 3);
var options = {
fontSize: '20',
title: 'Auckland Extreme Tides Summary',
titleTextStyle: {fontSize: 20, fontName: 'Arial', color: 'Black', bold:'True'},
hAxis: {title: 'Year', format: 'yyyy'},
height: 600,
chartArea: {height: '75%', width: '80%', left: 100, right: 100},
legend: {position: 'top', alignment: 'start', textStyle: {fontSize: 8, fontName: 'Helvetica'}, maxLines: 5},
colors: ['blue'],
tooltip: {isHtml: true},
// Gives each series an axis name that matches the Y-axis below.
series: {
0: {targetAxisIndex: 0, color:'blue'},
1: {targetAxisIndex: 0, color:'gray'},
2: {targetAxisIndex: 0, color:'#0099C6'},
3: {targetAxisIndex: 1, color:'navy'},
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Height above Chart Datum (mm)', viewWindow:{min: 3500, max: 4150}, format:'###0'},
1: {title: 'Number of Observed High Tides > HAT', viewWindow: {min: 0, max: 2}},
},
theme: 'material'
};
var chart = new google.visualization.LineChart(document.getElementById("AucklandChart_div"));
chart.draw(data,options);
}
</script>
<body>
<div id="AucklandChart_div"></div>
</body>
时间戳正在作为字符串加载到数据表中。
要加载为日期,请尝试更改此...
echo "['".$row['Timestamp']."',".$row['Highest Annual Observed Tide'].",".$row['Highest Astronomical Tide'].",".$row['Highest Annual Predicted Tide'].",".$row['Observed High Tides > HAT']."],";
到...
echo "[new Date('".$row['Timestamp']."'),".$row['Highest Annual Observed Tide'].",".$row['Highest Astronomical Tide'].",".$row['Highest Annual Predicted Tide'].",".$row['Observed High Tides > HAT']."],";