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

CdSdw 发表于 Dev

CdSdw

我有一个使用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链接。

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

麦拉汉

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（在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 ...

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。