0

我第一次尝试通过 HighchartsPHP 使用 HighCharts/HighStocks 库。

我正在从我的 Postgres 数据库中提取数据，但在获取要显示的图表时遇到问题。看起来数据格式正确，但仍未显示。

时间戳已经按 asc 顺序来自数据库，所以这不是问题......

看来我搞砸了这个过程的一小部分......

这是我的脚本：

<?php

include "/data1/www/php/session.php";
include "/data1/www/php/database.php";
include_once "extra/HighchartsPHP/Highchart.php";

$max_rows       = 50;

$symbol         = "FB";
$db_conn        = pg_pconnect($_SESSION['conn_string']);
$db_query       = "select date, open, high, low, close, volume from stocks_prices where symbol = '$symbol' order by date asc";
$result         = pg_query($db_query) or die ('Query failed: ' . pg_last_error());
$data           = pg_fetch_all($result);

$prices     = array();
$volume     = array();
$count      = min(count($data), $max_rows);
for ($row = 0; $row <$count; $row++) {
    $date       = strtotime($data[$row]['date'])*1000;
    $open       = floatval($data[$row]['open']);
    $high       = floatval($data[$row]['high']);
    $low        = floatval($data[$row]['low']);
    $close      = floatval($data[$row]['close']);
    $vol        = intval($data[$row]['volume']);
    $temp1      = array($date, $open, $high, $low, $close);
    $temp2      = array($date, $vol);
    array_push($prices, $temp1);
    array_push($volume, $temp2);
}

$chart  = new Highchart(Highchart::HIGHSTOCK);
$chart->chart->renderTo  = "container";
$chart->rangeSelector    = array('selected' => 1,);
$chart->title->text      = "$symbol Stock Price";
$chart->scrollbar->liveRedraw   = "true";
$chart->yAxis = array(
    array(
        'title'     => array('text' => "OHLC"),
        'height'    => 200,
        'lineWidth' => 2,
    ),
    array(
        'title'     => array('text' => "Volume"),
        'top'       => 300,
        'height'    => 100,
        'offset'    => 0,
        'lineWidth' => 2,
    ),
);
$chart->series[] = array(                       **# solution - remove the []**
    array(
        'type'      => "ohlc",
        'name'      => "$symbol Stock Price",
        'data'      => json_encode($prices),    **# solution - remove the json_encode()**
        'dataGrouping'  => array(
            'units' => array(
                array("week", array(1)),
                array("month", array(1, 2, 3, 4, 6)),
            ),
        ),
    ),
    array(
        'type'      => "column",
        'name'      => "Volume",
        'data'      => json_encode($volume),    **# solution - remove the json_encode()**
        'yAxis'     => 1,
        'dataGrouping'  => array(
            'units' => array(
                array("week", array(1)),
                array("month", array(1, 2, 3, 4, 6)),
            ),
        ),
    ),
);


?>

<html>
  <head>
    <title>OHLC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <?php
      foreach ($chart->getScripts() as $script) {
         echo '<script type="text/javascript" src="' . $script . '"></script>';
      }
    ?>
    <script type="text/javascript" src="/extra/highstocks/js/modules/exporting.js"></script>
  </head>
  <body>
    <div id="container" style="height: 500px; min-width: 500px"></div>
    <script type="text/javascript">
        $(function() {
            <?php echo $chart->render("chart"); ?>;
       });
    </script>
  </body>
</html>

这是显示页面时的 html 源输出：

<html>
  <head>
    <title>OHLC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="/extra/highstocks/js/highstock.js"></script>  <script type="text/javascript" src="/extra/highstocks/js/modules/exporting.js"></script>
  </head>
  <body>
    <div id="container" style="height: 500px; min-width: 500px"></div>
    <script type="text/javascript">
        $(function() {
            chart = new Highcharts.StockChart({"chart":{"renderTo":"container"},"rangeSelector":{"selected":7,"inputEnabled":"false","buttons":[{"type":"day","count":1,"text":"1d"},{"type":"day","count":5,"text":"1w"},{"type":"day","count":10,"text":"2w"},{"type":"month","count":1,"text":"1m"},{"type":"month","count":2,"text":"2m"},{"type":"month","count":3,"text":"3m"},{"type":"month","count":6,"text":"6m"},{"type":"year","count":1,"text":"1y"},{"type":"year","count":2,"text":"2y"},{"type":"year","count":5,"text":"5y"},{"type":"all","text":"All"}]},"title":{"text":"FB Stock Price"},"scrollbar":{"liveRedraw":"true"},"yAxis":[{"title":{"text":"OHLC"},"height":200,"lineWidth":2},{"title":{"text":"Volume"},"top":300,"height":100,"offset":0,"lineWidth":2}],"series":[[{"type":"ohlc","name":"FB Stock Price","data":"[[1337299200000,42.05,45,38,38.23],[1337558400000,36.53,36.66,33,34.03],[1337644800000,32.61,33.59,30.94,31],[1337731200000,31.37,32.5,31.36,32],[1337817600000,32.95,33.21,31.77,33.03],[1337904000000,32.9,32.95,31.11,31.91],[1338249600000,31.48,31.69,28.65,28.84],[1338336000000,28.7,29.55,27.86,28.19],[1338422400000,28.55,29.67,26.83,29.6],[1338508800000,28.89,29.15,27.39,27.72],[1338768000000,27.2,27.65,26.44,26.9],[1338854400000,26.7,27.76,25.75,25.87],[1338940800000,26.07,27.17,25.52,26.81],[1339027200000,27,27.35,26.15,26.31],[1339113600000,26.55,27.76,26.44,27.1],[1339372800000,27.18,28.07,26.84,27.01],[1339459200000,27.48,27.77,26.96,27.4],[1339545600000,27.66,28.1,27.1,27.27],[1339632000000,27.65,28.32,27.38,28.29],[1339718400000,28.51,30.1,28.35,30.01],[1339977600000,29.96,32.08,29.41,31.41],[1340064000000,31.54,32.18,30.7,31.91],[1340150400000,31.92,31.93,31.15,31.6],[1340236800000,31.67,32.5,31.51,31.84],[1340323200000,32.41,33.45,32.06,33.05],[1340582400000,32.86,33.02,31.55,32.06],[1340668800000,32.69,33.44,32.5,33.1],[1340755200000,32.46,32.9,31.9,32.23],[1340841600000,31.96,32.19,30.9,31.36],[1340928000000,31.92,31.99,30.76,31.1],[1341187200000,31.25,31.73,30.55,30.77],[1341273600000,30.91,31.44,30.8,31.2],[1341446400000,31.32,31.63,31.02,31.47],[1341532800000,31.44,31.9,31.26,31.73],[1341792000000,32.1,32.88,31.99,32.17],[1341878400000,32.43,32.48,31.16,31.47],[1341964800000,31.48,31.56,30.55,30.97],[1342051200000,30.7,31.4,30.6,30.81],[1342137600000,31.04,31.07,30.56,30.72],[1342396800000,30.5,30.5,28.21,28.25],[1342483200000,28.48,28.59,27.15,28.09],[1342569600000,28.31,29.29,28.15,29.11],[1342656000000,29.41,29.5,28.63,29],[1342742400000,29,29.47,28.72,28.76],[1343001600000,28.12,29,28.01,28.75],[1343088000000,28.82,29.45,28.1,28.45],[1343174400000,28.39,29.49,28.08,29.34],[1343260800000,27.75,28.23,26.73,26.85],[1343347200000,23.19,24.54,22.28,23.71],[1343606400000,24,24.04,23.03,23.15]]","dataGrouping":{"units":[["week",[1]],["month",[1,2,3,4,6]],["year",[1,2,5]]]}},{"type":"column","name":"Volume","data":"[[1337299200000,573576400],[1337558400000,168192700],[1337644800000,101786600],[1337731200000,73600000],[1337817600000,50237200],[1337904000000,37149800],[1338249600000,78063400],[1338336000000,57267900],[1338422400000,111639200],[1338508800000,41855500],[1338768000000,35230300],[1338854400000,42473400],[1338940800000,61489200],[1339027200000,26159500],[1339113600000,38034000],[1339372800000,28219600],[1339459200000,15816800],[1339545600000,17102800],[1339632000000,16855000],[1339718400000,43563800],[1339977600000,42978900],[1340064000000,30849000],[1340150400000,15553600],[1340236800000,21875300],[1340323200000,74834000],[1340582400000,24352900],[1340668800000,24858700],[1340755200000,28568000],[1340841600000,17713300],[1340928000000,19526900],[1341187200000,14122000],[1341273600000,8763600],[1341446400000,10032100],[1341532800000,10945600],[1341792000000,17785200],[1341878400000,14269500],[1341964800000,13030300],[1342051200000,11300700],[1342137600000,8108300],[1342396800000,24672100],[1342483200000,30438600],[1342569600000,16841800],[1342656000000,13685100],[1342742400000,11869100],[1343001600000,12390700],[1343088000000,11539800],[1343174400000,17230200],[1343260800000,64597400],[1343347200000,123102300],[1343606400000,29285900]]","yAxis":1,"dataGrouping":{"units":[["week",[1]],["month",[1,2,3,4,6]],["year",[1,2,5]]]}}]]});;
       });
    </script>
  </body>
</html>
4

1 回答 1

0

问题是您有 2 个错误和一种错误：您的data数组不能是字符串。在它周围加上双引号使 js 将其视为字符串。你的series数组有错位[和]字符。;在块的末尾有一个额外的chart（不会让它失败但不好）。

我强烈推荐使用 javascript“实时”系统来检查您的编码。我使用 jsFiddle，这是您的代码的工作版本。

于 2013-06-06T01:41:08.520 回答