Google 图表:自定义水平轴上的日期格式

问题描述 投票:0回答:1

我有一个谷歌折线图,它从 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>

javascript charts google-visualization
1个回答
0
投票

时间戳正在作为字符串加载到数据表中。
要加载为日期,请尝试更改此...

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']."],";
© www.soinside.com 2019 - 2024. All rights reserved.