Highcharts 数据显示不正确

Question

我有一个图表，显示员工每天的上班和下班时间。我已经从数据库中获取了数据，一切都运行良好。但是现在这些列在图表中错误地显示了数据。我不明白为什么会这样。有人可以帮我解决这个问题吗？

This is my chart. The column is always full no matter what value is set.

This is the data that is coming from the json file.

function InitHighChart()
{
    $("#chart").html("Wait, Loading graph...");

    var options = {
            chart: {
            type: 'column',
            renderTo: 'chart',
            zoomType: 'xy',
            backgroundColor:'transparent'
        },
        credits: {
            enabled: false
        },
        title: {
            text: '<?php echo $name; ?>\'s Attendence',
            x: -20
        },
        xAxis: {
            type: 'datetime',
            categories: [{}],
            labels: {
                rotation: -20,
            }           
        },
         yAxis: {

            type: 'datetime',
            plotBands: [{ 
                from: 1447747200000,
                to: 1447779600000,
                color: 'rgba(68, 170, 213, 0.1)',
                zIndex: 5,
               label: {
                    text: 'Office Timing',
                     style: {
                        color: '#606060'
                    } 
                } 
            }],
             plotLines: [{
                    //value: $inavg,
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Average Time In'
                    },
                    zIndex: 5
                }, {
                    //value: $outavg,
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Average Time Out'
                    },
                    zIndex: 5
                }],

        dateTimeLabelFormats: {

            minute: '%l:%M %p',
            hour: '%l:%M %p'

        },
        min: 1447729200000,
            max: 1447797600000,
        tickInterval:  1000,
                title: {
                    text: 'Time'
                }
            }, 
        tooltip: {
            formatter: function() {
                var s = '<b>'+ this.x +'</b>';

                $.each(this.points, function(i, point) {
                     s += '<br/>'+  point.series.name + ':  ' + Highcharts.dateFormat('%l:%M %p', point.y)
                });

                return s;
            },
            shared: true
        },
        series: [{},{}]
    };  

    $.ajax({
        url: "json.php?id=<?php echo $_GET['id']; ?>",
        type:'post',
        dataType: "json",
        success: function(data){
            options.xAxis.categories = data.categories;
            options.yAxis.plotLines[0].value = data.inavg;
            options.yAxis.plotLines[1].value = data.outavg;
            options.series[0].name = 'Time In';
            options.series[0].data = data.timein;
            options.series[1].name = 'Time Out';
            options.series[1].data = data.timeout;
            console.log(options);
            var chart = new Highcharts.Chart(options);          
        }
    });
}





<?php 
require_once("session.php"); 
require_once("connection.php");
$id= $_GET['id'];   
$query= "SELECT * ";
$query.= "FROM attendence ";
$query.= "WHERE emp_id = {$id}";
$result=mysqli_query($conn,$query);
if(!$result){
echo ("Database query failed. ".mysqli_connect_error());
}  
$categories=array();
$timein=array();
$timeout=array();
$avrgi="";
$avrgo="";
$count=0;
while($row = mysqli_fetch_assoc($result)){ 
$categories[]= $row['date'];
$itime=$row['time_in'];
$split=str_split($itime, 11);
$timei=end($split);
$timein[]= strtotime($timei)*1000;
$otime=$row['time_out'];
$osplit=str_split($otime, 11);
$timeo=end($osplit);
$timeout[]= strtotime($timeo)*1000;
$avrgi+=strtotime($timei)*1000;
$avrgo+=strtotime($timeo)*1000;
$count++;
} 
$inavg= $avrgi/$count;
$outavg= $avrgo/$count;      

$graph_data=array('categories'=>$categories,'timein'=>$timein,
'timeout'=>$timeou    t,'inavg'=>$inavg,'outavg'=>$outavg);
echo json_encode($graph_data);
exit;
?>

Answer 1

由于无法实时查看图表，我猜您发送的数据超出了您的轴最大值。

如果您上面的代码中的数据，以及您链接的图像中的数据是准确的，那么确实如此。因此，条形图超出了绘图区域的末端。

您正在根据第一个日期在轴上设置最小值和最大值，然后将数据数据发送到各个日期的系列。这行不通……

如果您想根据时间轴绘制多个日期，则需要按例如秒数而不是使用时间戳来处理和抽象数据。