javascript - Highchart 的 x 轴未显示正确的数据

Question

我有一个名为每月标记的表，其结构如下:

id
month
year
total_flagged

它的工作方式是，当一个帖子被标记时，它会检查当前的月份和年份，如果该年份存在于数据库中，它只会+1到标记总数，否则它将创建一个新行。例如，目前我的数据库中有 1 行:

id: 1
month: April
year: 2016
total_flagged: 28

如果用户标记 5 月 1 日的帖子，则会生成一个新行，显示 月份:5 月。

现在，我正在尝试在 Highchart 上显示这些数据。 y 轴显示标记帖子的数量，而 x 轴显示月份。表格中只有一行，图表显示如下:

这没关系。虽然理想情况下我希望所有月份都在底部，但是表中存在的月份，只有它们才会显示数据。

尽管如此，当表中存在多行时就会出现问题。如果我有 4 月和 5 月的数据(表中的 2 行)，图表将如下所示:

x 轴上显示的数字 10 是 4 月份的 total_flaged。

这是我存储数据的方式:

$statement = mysqli_prepare ($connect, "SELECT * FROM monthly_flagged");
mysqli_stmt_execute($statement);
$months = array();
$data = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
    $months[]          = $get_data['month'];
    $data[]            = $get_data['total_flagged'];
}
mysqli_stmt_close($statement);

在我的 Highcharts JavaScript 上:

xAxis: {
    categories: [<?php echo json_encode($months); ?>]
},

和

series: [{
            name: 'Flagged posts',
            data: [<?php echo json_encode($data); ?>]
        } 

编辑:

当前 PHP 代码:

<?php
$statement = mysqli_prepare ($connect, "SELECT * FROM monthly_flagged");
mysqli_stmt_execute($statement);
$months = array();
$data = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
    $months[]          = $get_data['month'];
    //$data[]            = $get_data['total_flagged'];
    $data[] = $get_data['total_flagged'][0];
}

mysqli_stmt_close($statement);
?>

用于 Highcharts 的 JavaScript(完整):

<script>
$(function () {
    $('#container').highcharts({
        title: {
            text: 'Flagged Posts',
            x: -20 
        },
        xAxis: {
            categories: <?php echo json_encode($months); ?>
        },

        yAxis: {
            format: '',
        },
        yAxis: {
            title: {
                text: 'Number of flagged posts',
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Flagged posts',
            data: <?php echo json_encode($data); ?>
        }]
    });
});
</script>

当前图表:

Answer 1

存储数据:

$statement = mysqli_prepare ($connect, "SELECT * FROM monthly_flagged");
mysqli_stmt_execute($statement);
$months = array();
$data = array();
$result = mysqli_stmt_get_result($statement);
while($get_data = mysqli_fetch_assoc ($result)){
    $months[]          = $get_data['month'];
    $data[]            = $get_data['total_flagged'];
}
mysqli_stmt_close($statement);

类别和系列图表选项:

xAxis: {
categories: <?php echo json_encode($months); ?>
}

series: [{
        name: 'Flagged posts',
        data: <?php echo json_encode($data); ?>
}