Question

我一直在尝试使用Papaparse4解析CSV文件，以便在使用C3js创建的图表上使用它，但我无法让它工作。

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

您可以在此处进行测试：http://jsfiddle.net/Honzo_Nebro/mv6eomf4/

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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;
            }
          }
        }
      });
    }
  });
}

＆＃13;

<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>

＆＃13;

C3js，Papaparse，Parse CSV到C3js

1 个答案: