從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鏈接。

我的主要問題是不知道是否存在將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（在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