使用c3.js读取csv数据文件

Question

As a new web developer, I would like to visualize csv data from c3.js. 作为一个新的Web开发人员，我想可视化c3.js中的csv数据。 I have looked into their examples, and succeeded so far with data entered manually by hand as follows: 我研究了他们的示例，到目前为止，通过手动输入以下数据成功完成了以下操作：

    <!DOCTYPE html>
<html>
<html lang="en">
<head>
    <title>Visualisation test</title>
    <meta charset="utf-8" />
       <link href="libs/c3.min.css" rel="stylesheet" />
    <script src="libs/d3.min.js"></script>
    <script src="libs/c3.min.js"></script>
</head>

  <body>
  <p> <b> The chart is displayed below: </b> </p>
    <div id="chart"></div>
    <script> 

    var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400],
            ['data2', 130, 100, 140, 200, 150, 50, 130, 100, 140, 200],            
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.5
        }
    },
   axis: {rotated : true}
});

    </script>
  <p> End of Chart </p>
  </body>
</html>

But reading the data from a csv file doesn't display anything. 但是从csv文件读取数据不会显示任何内容。 The way I did was by remplacing the data section with the following code: 我这样做的方法是通过使用以下代码复制数据部分：

data: {
        url: '/path/to/my/file.csv',
        type: 'line'
    }

My CSV file content: 我的CSV文件内容：

data1,data2
120,80
140,50
170,100
150,70
180,120

Thanks for your help. 谢谢你的帮助。

Answer 1

You probably have a problem with your path, because your snippet is the correct way to load an external CSV file into C3: 您的路径可能有问题，因为您的代码段是将外部CSV文件加载到C3的正确方法：

data: {
    url: 'data.csv',
    type: 'bar'
},

This is a plunkr with your code, and your data is loaded from a CSV file, check it: https://plnkr.co/edit/moRdOmyeMkb533XJHyoY?p=preview 这是一个带有代码的插件，并且您的数据是从CSV文件加载的，请检查它： https ://plnkr.co/edit/moRdOmyeMkb533XJHyoY?p=preview

This is the documentation: http://c3js.org/samples/data_load.html 这是文档： http : //c3js.org/samples/data_load.html

Answer 2

Just found the issue. 刚发现问题。 Just make sure to disable ad blockers extensions ... 只要确保禁用广告拦截器扩展...

Answer 3

You could read the file using PHP: 您可以使用PHP读取文件：

PHP CSV string to array PHP CSV字符串到数组

then json_encode the output and use it in your columns array. 然后json_encode输出，并在您的columns数组中使用它。

使用c3.js读取csv数据文件

问题描述

3 个解决方案

解决方案1
0 2016-07-02 09:30:10

解决方案2
0 已采纳

解决方案3
-3 2016-07-02 00:33:15

使用c3.js读取csv数据文件

问题描述

3 个解决方案

解决方案1 0 2016-07-02 09:30:10

解决方案2 0 已采纳

解决方案3 -3 2016-07-02 00:33:15

解决方案1
0 2016-07-02 09:30:10

解决方案2
0 已采纳

解决方案3
-3 2016-07-02 00:33:15