使用 JSON 的 Highcharts - 图表不显示 mysql 数据答案

【问题标题】：Highcharts using JSON - graph not displaying mysql data使用 JSON 的 Highcharts - 图表不显示 mysql 数据
【发布时间】：2014-07-21 20:42:52
【问题描述】：

我已经能够使用 mysql 生成结果：

$myArray=array();
$tempArray = array();

// Get all records
while ( $row = $results->fetch_assoc())
{
    $tempArray = $row;
    array_push($myArray, $tempArray);
}
echo json_encode($myArray);

$mysqli->close();

 ?>

然后，我使用以下 Javascript 将其包含在我的页面 index.php 上生成图表。

我不理解/缺少哪些概念/代码来根据我的 ajax json 生成图表？

已编辑 - 解决方案：

生成 json 的最终 PHP 代码：

while ( $row = $results->fetch_assoc())
{   

    $tempArray[0] = $row['unix_timestamp(auct.end_date)'];
    $tempArray[0] *= 1000;
    $tempArray[1] = $row['winning_bid'];

    array_push($myArray, $tempArray);

}
echo json_encode ($myArray, JSON_NUMERIC_CHECK);

$mysqli->close();

 ?>

最终的javascript代码：

$('#btn_search').click(function(){
    txt_search = $('#txt_search').val();
    $.ajax({                                      
      url: './php/search.php',  
      type: 'GET',
      data: {search: txt_search}, 
      dataType: 'json',                   
      success: function(rows)      
      {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chartdiv',
                type: 'line',
                marginRight: 100,
                marginBottom: 50
            },
            title: {
                text: 'Whisky Tracking',
                x: -20 //center
            },
            xAxis: {
                text: 'EndDate',
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Price',
                    color: '#CC680E'
                }, 
                plotLines: [{
                    value: 0,
                    width: 20,
                    color: '#CC680E'
                }]
            },
            series: [{
            name:  txt_search,
            xAxis:0,
            data: rows,
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                    return '£'+ Highcharts.numberFormat(this.y, 0);
                    }
                }
            }],         

        });
      }
    }); 
    goToByScroll('tracker');
    return false;
});

来自 JSON 的样本数据：

[1306732000000,160],[1306745000000,45],[1306788000000,65],[1306788000000,50],[1306712000000,130],[1306733000000,240],[1306744000000,60],[1306788000000,250],[1306710000000,145]

【问题讨论】：

什么不起作用？页面上有chartdiv的div吗？
是的 - 抱歉它没有显示任何数据（猜测数组是问题）。图表显示但没有数据
您希望它显示什么？目前看起来您在 JSON 中有三个不同的行，那么您打算如何在 y 轴上显示所有三个？
我对名称列不感兴趣，而是对 Y 轴上的获胜和 X 轴上的日期感兴趣 - 抱歉，我应该将其包含在
创建了一个包含更准确信息的新答案。

标签： javascript php mysql json highcharts

【解决方案1】：

问题是值是字符串，例如，您的数据：

["2011-05-30 00:00:00","130"]

应该改为：

[1306706400000, 130]

以毫秒为单位的时间戳和真实值。

您可以阅读有关json_encode(string, JSON_NUMERIC_CHECK) 的JSON_NUMERIC_CHECK 选项以将字符串更改为数字。但是您需要自己更改时间戳的日期。

编辑：问题还在于在双数组中设置数据，从：

data: [rows]

到：

data: rows

【讨论】：

谢谢，我已尝试修改查询以将日期时间列返回为 UNIX_TIMESTAMP，但这不起作用。它确实改变了图表，但并没有像我预期的那样（只是扩展了 Y 轴范围）。我是否认为数组中的第一个元素是 x 轴，第二个元素是 y 轴？
确实，第一个元素是 x 值，第二个是 y 值。确保您没有在 xAxis 中设置类别。另外，您能否附上实际 returnej JSON 的问题示例？谢谢。
我在上面进行了编辑，我读到一些建议 UNIX_TIMESTAMP 需要除以 1000 以使其与 Javascript 保持一致...感谢有关 xy 的信息
不除，不相乘.. ;) 为什么你改变了元素的顺序？
我在兜圈子，继续阅读不完全相关的帖子，我不明白我所做的更改......grrr。无论如何，我已经附上了图表的截图。我正在切换订单 - 但 y 轴看起来正在使用 timstamp？