从 c3.js 中的 csv 文件创建分类条形图

Question

我有使用 c3.js:

制作简单条形图的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>
    <script>

        var chart = c3.generate({
            data: {
                url: 'data/output.csv'
                type: 'bar'
            }
        });
    </script>

</body>
</html>

文件 output.csv 如下所示：

A,B,C,D
25,50,75,100

图表最终看起来像这样：

这是一组中的所有数据。

我想要做的是生成以下内容，而不是对数据进行硬编码，而是像第一个示例那样从 CSV 文件中获取它：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>C3</title>
    <meta charset="utf-8" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>

        var chart = c3.generate({
                  bar: {
                      width: 15
                  },
                  padding: {
                      left: 60
                  },
                  data: {
                      x: 'Letter',
                      columns:
                          [
                        ['Letter', 'A','B','C','D'],
                        ['value', 25,50,75,100]
                        ],

                      type: 'bar',
                      onclick: function(e) { console.log(ylist[e.x]);a = this;}

                  },
                  axis: {
                      x: {
                          type: 'category'
                      }
                  },
                  legend: {
                      show: false
                  }
        });

    </script>

</body>
</html>

这将给出如下所示的图形：

这是一个jFiddle link.

我的主要问题是不知道是否有办法将 CSV 文件分成几类，因为似乎 c3.js 总是将 CSV 文件放入时间序列中。

Answer 1

C3 使用 csv 中的第一行作为 header 行，然后 returns 一组 objects 像 {A:25},{B:50} which C3会发现 difficult/impossible 以您喜欢的方式使用。

改为使用 D3 的 parseRows 函数在图表外解析 csv。然后在前面添加一个行描述符，C3 可以使用它来了解文件的哪个位做什么。

https://jsfiddle.net/bm57gye5/2/

// This is a separate bit of html which is explained below
<pre id="data">
A,B,C,D
25,50,75,100
</pre>

// Actual javascript
var unparsedData = d3.select("pre#data").text();
var data = d3.csv.parseRows( unparsedData );
data[0].splice (0,0,"Letter");
data[1].splice (0,0,"Data");
console.log ("data", data);

var chart = c3.generate({
  bar: {
    width: 15
  },
  padding: {
    left: 60
  },
  data: {
    columns: data,
        x: "Letter",
    type: 'bar',
    onclick: function(e) { console.log(ylist[e.x]);a = this;}

  },
  axis: {
      x: {
          type: 'category'
       }
   },
  legend: {
    show: false
  }
});

要从 url 访问 csv（在 jsfiddle 中，我只是将数据作为 html 的一部分引用）以馈入 csv.parseRows，您需要使用 d3.text 和一个回调：

d3.text("data/output.csv", function(unparsedData)
  {
   var data = d3.csv.parseRows(unparsedData);
... parsing / c3 chart generation continues on here as above ...

}

从 c3.js 中的 csv 文件创建分类条形图

Creating a categorical bar chart from csv file in c3.js

html

javascript

csv

c3.js