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

回答

相關問題