Question

我正在创建一个活动系统，在其中记录参加活动的任何人的ID号和时间戳。我希望能够看到每单位时间参加活动的人数的实时图表，例如以直方图的形式显示。

我一直在尝试使用Google图表，并获得了正确的数据，但无法弄清楚如何正确标记x轴。

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart', 'annotationchart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart(){
        var dataArray = <?= json_encode($database->getAttendanceData($id)); ?>;
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Library Card');
        data.addColumn('datetime', 'Time of Day');
        dataArray.forEach(function(dataRow){
            data.addRow([dataRow[0], new Date(dataRow[1]*1000)]);
        });
        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
        chart.draw(data);
    }

此代码生成this histogram。数据的实际趋势是正确的，但是时间戳显示在时间轴上。

我一直在尝试通过以下代码使用格式化程序：

var formatter = new google.visualization.DateFormat({pattern: "HH:mm:ss"});
formatter.format(data, 1);

但是，这似乎没有任何改变。

有人对如何实现直方图有任何想法吗？理想情况下，我只是在底部有时间，但是实际的时间戳值将用于直方图数据（这样，跨越两天的事件就不会使用相同的时间段）！

预先感谢，托比

Google图表中Unix时间戳的直方图

0 个答案: