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中的第一行作为标题行，然后返回一组对象，例如{A：25}，{B：50}，C3会发现很难/不可能以你的方式使用它们。我喜欢。

而是使用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文件创建分类条形图

1 个答案: