C3js，Papaparse，解析CSV到C3js

我一直试图解析一个CSV文件Papaparse4使用它创建与C3js图表，但我不能让它工作。C3js，Papaparse，解析CSV到C3js

我想能够加载不同的CSV文件，所以我使用文件输入，文件被解析（我可以在控制台上看到它），但我无法将数据加载到图表。

你可以在这里进行测试：http://jsfiddle.net/Honzo_Nebro/mv6eomf4/

function handleFileSelect(evt) { 
 
    var file = evt.target.files[0]; 
 

 
    Papa.parse(file, { 
 
    header: true, 
 
    dynamicTyping: true, 
 
    complete: function(results) { 
 
     data = results; 
 
     console.log(data); 
 
     var chart = c3.generate({ 
 
     bindto: '#chart', 
 
     size: { 
 
      height: 359 
 
     }, 
 
     json: data, 
 
     }); 
 
    } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#csv-file").change(handleFileSelect); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="csv-file" name="files" /> 
 
<div id="chart"></div>

来源

2015-05-07 Honzo_Nebro

只是一种预感，但您可能需要results.data。（为什么你要创建一个'data'变量？只需使用'results'。） – Matt

这真的很有帮助，现在c3js加载空白数据，但能够识别列的数量，所以这是一个正确的值。非常感谢！ –

所以，有很多从我们来到这个朋友的见解。这似乎不工作的这个片段，但它确实对的jsfiddle，我可能放错地方的东西http://jsfiddle.net/Honzo_Nebro/mv6eomf4/3/

function handleFileSelect(evt) { 
 
    var file = evt.target.files[0]; 
 

 
    Papa.parse(file, { 
 
    header: true, 
 
    dynamicTyping: true, 
 
    complete: function(results) { 
 
     console.log(results.data); 
 
     //Create an empty array and fill it with the headers 
 
     var values = []; 
 
     $.each(results.data[0], function(key, value) { 
 
     values.push(key); 
 
     }); 
 
     var chart = c3.generate({ 
 
     bindto: '#chart', 
 
     size: { 
 
      height: 359 
 
     }, 
 
     data: { 
 
      json: results.data, 
 
      keys: { 
 
      //assign the array to the value property 
 
      value: values, 
 
      }, 
 
      type: 'donut', 
 
     }, 
 
     unload: true, 
 
     legend: { 
 
      postion: 'bottom', 
 
     }, 
 
     tooltip: { 
 
      format: { 
 
      value: function(name, ratio, id, index) { 
 
       ratio2 = ratio * 100; 
 
       var text = name + ", (" + ratio2.toFixed(1) + "%)"; 
 
       return name; 
 
      } 
 
      } 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
}

<script src="https://rawgit.com/mholt/PapaParse/master/papaparse.min.js"></script> 
 
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/> 
 
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" id="csv-file" name="files" /> 
 
<div id="chart"></div>

来源

2015-05-08 13:11:58

C3js，Papaparse，解析CSV到C3js

回答

相关问题