javascript - php 在 javascript 中上传并解析文件以获取图表

标签 javascript php csv

html

<!doctype html>
<html>
  <head>
    <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.0/anychart-ui.min.css" />
    <style>
      html, body, #container {
        width: 1000px;
        height: 600px;;
        margin: auto;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>

    anychart.onDocumentReady(function() {

  // set the data
    table = anychart.data.table('x');
    table.addData([
{'x': '2015-04-01', 'o': 18.23, 'h': 19.36, 'l': 18.18, 'c': 19.31},
{'x': '2015-04-02', 'o': 19.50, 'h': 19.89, 'l': 19.00, 'c': 19.29},
{'x': '2015-04-03', 'o': 19.13, 'h': 19.15, 'l': 18.43, 'c': 18.75},
{'x': '2015-04-06', 'o': 18.54, 'h': 18.76, 'l': 18.27, 'c': 18.76},
{'x': '2015-04-07', 'o': 18.76, 'h': 19.14, 'l': 18.63, 'c': 18.76},
{'x': '2015-04-08', 'o': 18.97, 'h': 19.62, 'l': 18.96, 'c': 19.19},
{'x': '2015-04-09', 'o': 19.45, 'h': 19.70, 'l': 19.22, 'c': 19.67},
{'x': '2015-04-13', 'o': 19.69, 'h': 19.85, 'l': 19.37, 'c': 19.59},
{'x': '2015-04-14', 'o': 19.44, 'h': 19.55, 'l': 19.00, 'c': 19.35},
{'x': '2015-04-15', 'o': 19.21, 'h': 19.25, 'l': 18.51, 'c': 18.83},
{'x': '2015-04-16', 'o': 19.16, 'h': 19.78, 'l': 18.99, 'c': 19.76},
{'x': '2015-04-17', 'o': 19.69, 'h': 19.69, 'l': 19.00, 'c': 19.20},
{'x': '2015-04-20', 'o': 18.89, 'h': 18.95, 'l': 18.57, 'c': 18.61},
{'x': '2015-04-21', 'o': 18.59, 'h': 19.08, 'l': 18.57, 'c': 18.97},
{'x': '2015-04-22', 'o': 18.76, 'h': 19.19, 'l': 18.70, 'c': 18.78},
{'x': '2015-04-23', 'o': 18.92, 'h': 18.94, 'l': 18.47, 'c': 18.92},
{'x': '2015-04-24', 'o': 19.82, 'h': 21.20, 'l': 19.50, 'c': 20.91},
{'x': '2015-04-27', 'o': 20.55, 'h': 20.82, 'l': 20.28, 'c': 20.40},
{'x': '2015-04-28', 'o': 20.25, 'h': 20.27, 'l': 19.79, 'c': 19.93},
{'x': '2015-04-29', 'o': 20.11, 'h': 20.89, 'l': 20.06, 'c': 20.25},
{'x': '2015-04-30', 'o': 20.60, 'h': 21.10, 'l': 20.01, 'c': 20.26},
{'x': '2015-05-01', 'o': 20.19, 'h': 20.35, 'l': 19.86, 'c': 20.24},
{'x': '2015-05-04', 'o': 20.37, 'h': 20.40, 'l': 19.98, 'c': 20.19},
{'x': '2015-05-05', 'o': 20.14, 'h': 20.24, 'l': 19.64, 'c': 19.79},
{'x': '2015-05-06', 'o': 20.06, 'h': 20.07, 'l': 19.61, 'c': 19.79},
{'x': '2015-05-07', 'o': 19.96, 'h': 19.99, 'l': 19.14, 'c': 19.32},
{'x': '2015-05-08', 'o': 19.46, 'h': 19.64, 'l': 19.14, 'c': 19.42},
{'x': '2015-05-11', 'o': 19.20, 'h': 19.73, 'l': 19.01, 'c': 19.32},
{'x': '2015-05-12', 'o': 19.51, 'h': 20.06, 'l': 19.47, 'c': 19.89},
{'x': '2015-05-13', 'o': 19.92, 'h': 20.00, 'l': 19.67, 'c': 19.75},
{'x': '2015-05-14', 'o': 19.83, 'h': 20.23, 'l': 19.80, 'c': 20.06}
    ]);

    // map the data
    mapping = table.mapAs({'open':"o",'high': "h", 'low':"l", 'close':"c"});
    chart = anychart.stock();

    // set the series
    var series = chart.plot(0).ohlc(mapping);
    series.name("ACME Corp. stock prices (apr 2015 - jul 2015)");

    chart.title('Generali');
    chart.container('container');

    chart.draw();
});

    </script>
  </body>
</html>

php

$file = fopen("isp.csv","r");

$lines = array();
while( ($row = fgetcsv($file)) !== FALSE ) {
    $lines[] = $row;
}
var_dump($lines);

csv 文件

csv 文件是雅虎财经历史数据,格式为

Date,Open,High,Low,Close,Adj Close,Volume
2016-01-04,2.799631,2.799631,2.703530,2.982000,2.703530,103103922                       
2016-01-05,2.723475,2.756113,2.707156,3.040000,2.756113,70473223                        
2016-01-06,2.745234,2.756113,2.681771,2.958000,2.681771,84184856                        
2016-01-07,2.620121,2.661825,2.560284,2.908000,2.636440,122691238                       
2016-01-08,2.641880,2.692650,2.627374,2.898000,2.627374,96943673                        
2016-01-11,2.618308,2.672704,2.591109,2.858000,2.591109,75364956                        
2016-01-12,2.598362,2.663639,2.585670,2.916000,2.643693,81961998                        
2016-01-13,2.661825,2.734355,2.661825,2.970000,2.692650,96167028

我需要用 csv 文件的值替换表 data.addData 。我怎样才能做到这一点?有人可以为我提供一个 foreach 或另一个循环来初始化表的值吗?

最佳答案

佩德,

尝试以下操作,因为 $lines[] 是一个数组

Caveat: the following suggested answer runs with couple of assumptions-- 1. You will always have 7 data points separated by comma 2. AND each data points will not be blank---if you want to, you could avoid this assumption by checking to see if its blank or not by using isset()

table.addData([
<?php
$isFirst = TRUE;
foreach($lines as $line) {
    $lineData = explode(",", $line);

    echo ($isFirst === FALSE) ? "{'Date' : '$lineData[0]', 'Open' : '$lineData[1]', 'High' : '$lineData[2]', 'Low' : '$lineData[3]', 'Close' : '$lineData[4]', 'Adj Close' : '$lineData[5]', 'Volume' : '$lineData[6]'}," : "";

    $isFirst = FALSE;

}
?>

希望这有帮助!

-冲

关于javascript - php 在 javascript 中上传并解析文件以获取图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44589927/

相关文章:

javascript - 使用 twitter bootstrap 切换按钮和面板

javascript - 将 "more results..."文本添加到 ui bootstrap typeahead

php - Laravel 4 : Pivot Table, 或 ID

php - 查询多个表输出重复的结果

javascript - Angular 、下划线、拔除数组、排序

javascript - 客户端按键处理事件、设置焦点函数和 __doPostBack ASP.NET

php - 领域驱动设计和批处理

mysql - 比较两个 csv 文件的内容,其中两个文件之间的关系在第三个文件中指定?

java - 在使用 Super CSV 时,我可以获得验证错误的列号吗?

php - 通过 PHP 从站点重复检索数据