javascript - 使用 PHP 和 MYSQL 的 highstock 烛台图表中未显示 JSON 数据

Question

我正在尝试创建一个 highstock的 candlestick chart使用 php 和 mySQL。

到目前为止，这是我的代码，如果有人能帮助我，我将不胜感激:

这是我从 mySQL 数据库中检索数据并将其转换为 JSON 格式 (datachart.php) 的代码:

$conn = mysql_connect("localhost", "root", "") or die (mysql_error ());
$db = mysql_select_db ("b27sim") or die (mysql_error ());

$result=mysql_query ("SELECT date, open, high, low, close FROM mb27_daily") or die (mysql_error ());

$data = array();
$count = 0;
while ($row=mysql_fetch_array($result))
{

  $newdate = strtotime($row['date']) * 1000; 
  $data[] = array( $newdate, (float)$row['open'], (float)$row['high'], (float)$row['low'], (float)$row['close']);
  $count++;
}   
echo json_encode($data);

这是 datachart.php 的结果:

[[1350252000000,369.72,371.02,368.09,370.22],[1349820000000,366.58,369.13,364.92,368.92],[1349733600000,367.38,369.93,366.82,368.64],[1349388000000,367.28,371.85,367.2,369.9],[1349301600000,362.75,366.24,362.22,365.61],[1349215200000,363.34,363.54,361.27,362.27],[1349128800000,360.79,362.73,360.33,361.77],[1349042400000,360.75,360.75,357.94,359.46],[1348783200000,360.62,362.69,359.84,362.5],[1348696800000,356.39,361.01,355.32,359.34],[1348524000000,358,360.39,356.34,359.7],[1348437600000,357.96,360.99,355.92,356.89],[1348178400000,359.27,360.53,356.93,360.53],[1348092000000,358.74,359.31,356.51,358.01],[1348005600000,357.97,361.82,357.24,359.86],[1347919200000,359.8,360.34,356.78,358.5],[1233010800000,119.28,122.42,119.28,121.91]]

这是我在 index.htm 中的 javascript 代码:

$(function() {
    $.getJSON('datachart.php', function(data) {

    // create the chart
    chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container',
        },

        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'IB27 Price'
        },

        series : [{
            type : 'candlestick',
            name : '',
            data : data,
            tooltip: {
                valueDecimals: 2
            },
            dataGrouping : {
                units : [
                    ['week', // unit name
                    [1] // allowed multiples
                ], [
                    'month', 
                    [1, 2, 3, 4, 6]]
                ]
            }
        }]
    });
    });
});

这是我调用容器的 div:

<div id="container" style="height: 500px; min-width: 500px"></div>

结果如下:我得到的里面没有图表，但在底部显示了时间线，在右上角显示了日期范围等。

感谢你们在这方面的帮助，因为在过去的 4 个小时里，我一直在为此苦苦思索......:)

谢谢，拉兹

Answer 1

您的数据应按 x(时间戳)升序排序。