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

Question

作为一名新的 Web 开发人员，我想可视化来自 c3.js 的 csv 数据。我研究了他们的示例，到目前为止，手动输入的数据成功如下：

    <!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>

但是从 csv 文件读取数据没有显示任何内容。我的做法是用以下代码替换数据部分：

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

我的 CSV 文件内容：

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

感谢您的帮助。

Answer 1

您可以使用 PHP:

读取文件

PHP CSV string to array

然后 json_encode 输出并在您的列数组中使用它。

Answer 2

您的路径可能有问题，因为您的代码片段是将外部 CSV 文件加载到 C3 的正确方法：

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

这是你的代码的插件，你的数据是从 CSV 文件加载的，检查一下：https://plnkr.co/edit/moRdOmyeMkb533XJHyoY?p=preview

这是文档：http://c3js.org/samples/data_load.html

Answer 3

刚发现问题。只需确保禁用广告拦截器扩展...

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

Reading csv data file with c3.js

html

javascript

d3.js

c3.js