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

Question

I have code for a simple bar chart using c3.js: 我有一个使用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>

The file output.csv looks like this: 文件output.csv如下所示：

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

And the graph ends up looking like this: 图最终看起来像这样：

which is all of the data in one group. 这是一组中的所有数据。

What I'd want to do is producing the following, without hard coding the data, but rather, getting it from the CSV file like the first example: 我想要做的是产生以下内容，而不用对数据进行硬编码，而是像第一个示例那样从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>

which would give a graph that looks like this: 这将给出一个如下所示的图形：

Here is a jFiddle link. 这是一个jFiddle链接。

My main issue is not knowing if there is a way to split the CSV file into categories, since it seems like c3.js will always put a CSV file into a time series. 我的主要问题是不知道是否存在将CSV文件划分为类别的方法，因为c3.js似乎总是将CSV文件放入时间序列中。

Answer 1

C3 uses the first line in your csv as a header line and then returns a set of objects like {A:25},{B:50} which C3 will find difficult/impossible to use in the way you'd like. C3将csv中的第一行用作标题行，然后返回一组对象，例如{A：25}，{B：50}，C3会发现很难/不可能以您想要的方式使用它们。

Instead parse the csv outside the chart using D3's parseRows function. 而是使用D3的parseRows函数在图表外部解析csv。 Then prepend a row descriptor which C3 can use to know which bit of the file does what. 然后在行描述符之前添加一个C3可以用来知道文件的哪个位做什么的行描述符。

https://jsfiddle.net/bm57gye5/2/ 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
  }
});

To access the csv from a url (in the jsfiddle I just reference the data as part of the html) to feed into csv.parseRows you'll need to use d3.text and a callback as so: 要从URL（在jsfiddle中我只是引用html的一部分数据）访问csv以馈送给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 个解决方案

解决方案1
1 已采纳 2016-06-13 08:39:59

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-06-13 08:39:59

解决方案1
1 已采纳 2016-06-13 08:39:59