Highcharts 中文社区

查看: 366|回复: 0

[JS 数据处理] highchart不能读取csv数据问题

[复制链接]

该用户从未签到

1

主题

1

帖子

16

积分

HC 新手

Rank: 1

积分
16
发表于 2019-12-29 09:12:41 | 显示全部楼层 |阅读模式
请问一下,按照网站教程为什么不能读取data.csv 文件?不知道是不是哪里程序错了?
谢谢!
data.csv 放在index.html 同一级目录下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>第一个 Highcharts 图表</title>
  6. </head>
  7. <body>
  8.     <!-- 图表容器 DOM -->
  9.     <div id="container" style="width: 600px;height:400px;"></div>
  10.     <!-- 引入 highcharts.js -->
  11.         <script src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
  12.     <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
  13.         <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
  14.     <script>
  15. var options = {
  16.     chart: {
  17.         type: 'column'
  18.     },
  19.     title: {
  20.         text: '水果消费情况'
  21.     },
  22.     xAxis: {
  23.         categories: []
  24.     },
  25.     yAxis: {
  26.         title: {
  27.             text: '单位'
  28.         }
  29.     },
  30.     series: []
  31. };

  32. // 请求 data.csv 数据
  33. $.get('data.csv', function(data) {
  34.     // 分隔每一行
  35.     var lines = data.split('\n');

  36.     // 遍历每一行
  37.     $.each(lines, function(lineNo, line) {
  38.         var items = line.split(',');

  39.         // 处理第一行,即分类
  40.         if (lineNo == 0) {
  41.             $.each(items, function(itemNo, item) {
  42.                 if (itemNo > 0) {
  43.                     options.xAxis.categories.push(item);
  44.                 }
  45.             });
  46.         }

  47.         // 处理其他的每一行
  48.         else {
  49.             var series = {
  50.                 data: []
  51.             };
  52.             $.each(items, function(itemNo, item) {
  53.                 if (itemNo == 0) {
  54.                     series.name = item;   // 数据列的名字
  55.                 } else {
  56.                     series.data.push(parseFloat(item)); // 数据,记得转换成数值类型
  57.                 }
  58.             });
  59.             // 最后将数据 push 到数据列配置里
  60.             options.series.push(series);
  61.         }
  62.     });

  63.     // 创建图表
  64.     var chart = Highcharts.chart('container', options);
  65. });
  66.     </script>
  67. </body>
  68. </html>
复制代码


数据文件也像教程一样
data.csv  里面
分类,苹果,梨,橙子,香蕉
小明,8,4,6,5
小红,3,4,2,3
小张,86,76,79,77
小芳,3,16,13,15

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

快速回复 返回顶部 返回列表