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

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

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

这是一个包含您的代码的插件，您的数据是从CSV文件加载的，请检查它：https://plnkr.co/edit/moRdOmyeMkb533XJHyoY?p=preview

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

Answer 2

刚刚发现了这个问题。只需确保停用广告拦截器扩展程序...

Answer 3

您可以使用PHP读取文件：

PHP CSV string to array

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

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

3 个答案: