Highstock - 通过使用 php 创建的 csv 创建 OHLC 图答案

【问题标题】：Highstock - Creating an OHLC graph by csv created using phpHighstock - 通过使用 php 创建的 csv 创建 OHLC 图
【发布时间】：2012-08-13 17:41:55
【问题描述】：

我在导入 csv 以获取 highstock 图表时遇到了一些问题。我使用与 ohlc 示例相同的代码（在本地运行良好），但使用了另一个 CSV，它是由 php 在我的本地主机上创建的。

PHP 获取 CSV

<?PHP

// Declare the new variable as an array
$arrCSV = array();

// Open the CSV file
if (($handle = fopen("http://ichart.finance.yahoo.com/table.csv?s=AAPL&d=7&e=7&f=2012&g=d&a=8&b=7&c=1984&ignore=.csv", "r")) !==FALSE)
{

// Set the parent array key to 0
$key = 0;
// While there is data available loop through unlimited times (0) using separator (,)
while (($data = fgetcsv($handle, 0, ",")) !==FALSE) {

    // Count the total keys in each row
    $c = count($data);
    //print  $c . "<BR>"; // <------ 7 o numero de colunas

    //Populate the array
    If ($key != 0) {
        $arrCSV[$key-1][0] = strtotime($data[0]); //Time
        $arrCSV[$key-1][1] = $data[1];            //Open
        $arrCSV[$key-1][2] = $data[2];            //High
        $arrCSV[$key-1][3] = $data[3];            //Low
        $arrCSV[$key-1][4] = $data[6];            //Adj Close
        $arrCSV[$key-1][5] = $data[5];            //Volume
    }

    $key++;
} // end while

$keymax = $key;

// Close the CSV file
fclose($handle);
} // end if

print "?(/* AAPL historical OHLC data from the Google Finance API */<BR>";
echo json_encode($arrCSV,JSON_NUMERIC_CHECK);
print ");";

?>

导入和创建图表的代码：

<!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Highstock Example</title>

          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script type="text/javascript">
$(function() {
   $.getJSON('http://localhost/teste03.php', function(data) {

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

         rangeSelector : {
            selected : 2
         },

         title : {
            text : 'AAPL Stock Price'
         },

         series : [{
            type : 'ohlc',
            name : 'AAPL Stock Price',
            data : data,
            dataGrouping : {
               units : [[
                  'week', // unit name
                  [1] // allowed multiples
               ], [
                  'month', 
                  [1, 2, 3, 4, 6]
               ]]
            }
         }]
      });
   });
});

      </script>
   </head>
   <body>
<script src="js/highstock.js"></script>
<script src="js/modules/exporting.js"></script>

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

最后它只是给我一个空白页...... 这是由于使用 localhost 引起的吗？数组的顺序（下降而不是上升）？

帮助？

更新：添加了 json_encode 但仍然不起作用。

【问题讨论】：

只是为了添加更多信息，当前php正在打印以下csv：[[1344290400,622.77,625,618.04,618.26,10373100],[1344204000,617.29,624.87,615.26,619.89,1078940 (...)]]
就是这样，时间戳不是按升序排列的。检查下面的编辑答案
不，它仍然不起作用。同时，在对 consolo.log 进行一些测试后，问题似乎出在 getJSON 上。它运行，至少在控制台上它说： [12:16:26.572] GET http://(..)teste05.php [HTTP/1.1 200 OK 2766ms] 但它没有运行，因为我添加了一个控制台.log 在那里，从未收到任何输出。
所以你的 ajax 调用失败了。您如何访问当前页面？它也与本地主机？确保您没有发出跨域请求。你知道跨域ajax调用吗？如果没有看到这个，en.wikipedia.org/wiki/Same_origin_policy

标签： php javascript csv highcharts highstock

【解决方案1】：

进一步编辑 似乎你可能有 ajax 问题，尝试通过

进行隔离测试

使用SimpleTest.php（有关代码，请参阅OLD部分）并将其托管在与当前teste03.php相同的服务器上，并从中访问图表

 $.getJSON('http://localhost/SimpleTest.php', function(data) {
 ...
 }

或

<script type="text/javascript">
$(function() {
// $.getJSON('http://localhost/teste03.php', function(data) {
   var data= [[1000000,1,2,3,4],[2000000,3,2,3,4],[1000000,1,2,3,4]];
  // create the chart
  chart = new Highcharts.StockChart({
   ...

如果上述任何一种方法有效，则意味着您遇到了 ajax 问题，而不是 highcharts 问题。

已编辑（基于您对返回的 json 的评论）

数据中的时间戳值需要按升序排列。从您的以下 json

 [[1344290400,622.77,625,618.04,618.26,10373100],[1344204000,617.29,624.87,615.26‌,619.89,10789400]

1344290400>1344204000 因此不会工作。

旧
使用json_encode 方法生成json。
您需要传递给它的是一个数组数组，其中外部数组的大小与 CSV 中的行数相同，并且该外部数组的每个元素都是另一个具有 5 个元素的数组，即。时间戳，开，高，低，收。

SimpleTest.php:

<?php
  // JSON header
  header('Content-type: application/json');

  // Do not cache the response
  header('Cache-Control: no-cache, must-revalidate');
  header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');  

  // Parse CSV, and populate the 5 arrays viz. $timeStamp, $open, $high, $low, $close
  $count=3;
  $timeStamp=array(1000000,2000000,3000000); // In ascending order of time
  $open=array(5,10,15);
  $high=array(10,15,20);
  $low=array(0,5,10);
  $close=array(8,12,18);

  $dataArray=array();   // Outer array of array

  for( $i=0; $i<$count; $i++ ){
     // push an array into $dataArray for each data group
     $dataArray[] = array($timeStamp[$i], $open[$i], $high[$i], $low[$i],$close[$i]);
  }

  echo json_encode($dataArray); // Encode php array of array into json and echo/print it to output
?>

查看您的代码，我认为您可以调整 $arrCSV 以转换为所需的数组。

【讨论】：

您好，感谢您的回答，但它仍然无法正常工作。我已经使用了 json_encode，甚至设法用 JSON_NUMERIC_CHECK 去掉了变量上的引号，从而实现了与以前相同的 php。我将更新我的问题以添加这些修改。
json_encode 周围不需要print "?(/* AAPL historical OHLC data from the Google Finance API */<BR>"; 或print ");";
在最简单的情况下，您能否将我发布为不同 simpleAjaxTest.php 文件的上述 php 文件托管并尝试从 $.getJSON('http://localhost/simpleAjaxTest.php'... 之类的图表中访问它，看看是否有效，如果不是您手头有 ajax 问题，而不是 highchart 问题，进行此测试的替代方法是将 ajax 调用完全替换为您期望的硬编码 json 数据
酷，但你能指出 wat 部分完全解决了这个问题吗？所以我可以相应地重新编辑答案
问题出在以下 print "?(/* 来自 Google Finance API 的 AAPL 历史 OHLC 数据 */
"; echo json_encode($arrCSV,JSON_NUMERIC_CHECK); print ");" ;似乎没有必要在 json_encode 之前和之后添加这些打印。 highstock ohlcv 似乎只需要 json_encode 和另一边的 getJSON。