C3:选择csv列输入

时间:2017-01-17 21:23:54

标签: c3.js

如何从包含1200行和13列的csv数据文件中选择将在C3.js中绘制哪些列。 附录:我编辑了文件并进行了更改。该文件有效。所有问题都已解决有关一般信息,我从JSFiddle页面的副本中检索了基本文档。显然,每个JSFiddle页面源代码都包含指向JSFiddle上代码的两个(离线)功能副本的链接。 JSFiddle页面中编写的代码无法脱机工作。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="./resources/d3.v3.min.js"></script>
<script type="text/javascript" src="./resources/c3.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/c3.css">
<style type="text/css"></style>
<title>once again</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
d3.csv("./data/dataXY_11-21-2016.csv")
    .row(function(d) { return [d.time12, d.PVpower, d.Elevation]; })
    .get(function(error,rows) { 
        rows.unshift (["time 12", "PV array power(W)", "Elevation"])
        console.log(rows); 
      var chart = c3.generate({
        size:{
        width: 1000,
        height: 400
        },
    bindto: '#chart',
          data: {
              rows: rows,
              type: 'line',
                x: 'time 12',
                xFormat:'%I:%M:%S %p'
          },
            point: {show: false},
            tooltip: {show: false},
        axis: {
            x: {
                localtime: true,
                type:'timeseries',
                tick:{
                    //culling:{max: 50},
                    fit: true,
                    count: 50,
                    format: '%I:%M:%S %p',
                    rotate: 65,         
                      }//end tick
                },//end x

            y: {
                max: 350,
                min: 0
                } //end y
            },//end axis

        grid:{
            x:{
                show: true
            },//end x
            y:{
                show: true
              }//end y
            }//end grid
      });
});
}//]]> 
</script>
<body>
  <div id="chart"></div>
<script>
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

看看我在jsfiddle(下面的代码)

上搞砸了的这个例子

http://jsfiddle.net/Lpatkpj1/

我加载了csv,.row函数然后将每一行过滤成一种新的格式(数组而不是对象),在路上只挑选两列,然后全部返回{{1 (csv示例只是在网络上很方便的一个例子)。然后我使用unshift将数据的名称添加到rows数组的前面。然后,一个非常小的c3.generate可以使用.get选项显示此信息,您可以添加任何其他内容。

rows:

“我有,因为,发现d3.csv是d3发行版中的一个单独的文件” - 它可以,但是你可以将d3.js捆绑在一起,包括csv功能。请记住,c3目前不适用于d3的v4,只有v3 - https://github.com/c3js/c3/issues/1648