Highchart 的 x 轴没有显示正确的数据答案

【问题标题】：Highchart's x-axis not displaying correct dataHighchart 的 x 轴没有显示正确的数据
【发布时间】：2016-08-09 03:12:24
【问题描述】：

我有一个名为monthly flagged 的表，其结构如下：

id
month
year
total_flagged

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

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

如果用户在 5 月 1 日标记帖子，则会生成一个新行到 month: May。

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

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

不过，问题开始于表格中存在多行时。如果我有 4 月和 5 月的数据（表中有 2 行），图表将如下所示：

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

这是我存储数据的方式：

$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>

当前图表：

【问题讨论】：

在您将月份设置为类别并将total_flagged 设置为数据之前，您是否尝试过检查月份和数据这两个数组中有哪些值？
@RahulSharma - 感谢您的回复 :) 不。我很少使用数组，因此不知道如何检查值？
Bowser 调试器可以帮助您。只需在为数组赋值的地方设置一个断点即可。
@RahulSharma - 好的，所以在我的浏览器调试器中，$months 的值显示为：categories: [[ "April" , "May" ]]。还有data: [["10", "25"]] - 都是正确的
@RahulSharma - 好的，有进展，四月和五月现在都显示在我的 x 轴上，但没有显示任何数据。例如，不会生成任何行来说明 4 月有 10 个被标记的帖子等。

标签： javascript php mysql highcharts

【解决方案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); ?>
}

【讨论】：