C3js, Papaparse, Parse CSV to C3js

Я пытался разобрать CSV-файл с помощью Papaparse4, чтобы использовать его на диаграммах, созданных с помощью C3js, но я не могу заставить его работать.C3js, Papaparse, Parse CSV to 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, Parse CSV to C3js

ответ

Смежные вопросы