如何在我的HTML代码中包含papaparse?

时间:2015-12-30 12:46:53

标签: javascript html

我是昨天的javascript新手,并试图找出如何在我的网站上包含papaparse。我基本上想要一个按钮,您可以单击该按钮导入csv文件,然后在输出图形之前执行一些操作。

我使用过google图表,目前我的html代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>JavaScript Tutorial</title>


<!-- Link to External JavaScript -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

   

<script language="javascript" type="text/javascript">

google.load('visualization', '1', {packages: ['corechart', 'bar']});
google.setOnLoadCallback(drawStacked);

function drawStacked() {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');
  data.addColumn('number', 'Energy Level');

  data.addRows([
    [{v: [8, 0, 0], f: '8 am'}, 1, .25],
    [{v: [9, 0, 0], f: '9 am'}, 2, .5],
    [{v: [10, 0, 0], f:'10 am'}, 3, 1],
    [{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
    [{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
    [{v: [13, 0, 0], f: '1 pm'}, 6, 3],
    [{v: [14, 0, 0], f: '2 pm'}, 7, 4],
    [{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
    [{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
    [{v: [17, 0, 0], f: '5 pm'}, 10, 10],
  ]);

  var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    vAxis: {
      title: 'Rating (scale of 1-10)'
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

</script>
<noscript>
    <h3>JavaScript is Required</h3>
</noscript>


</body>

我想知道在哪里写这行:

Papa.parse(file, config)

在我的代码中以及如何创建一个按钮。还有什么src参考我用于PapaParse?它只是http://www.papaparse.com/ ???

1 个答案:

答案 0 :(得分:1)

您可以将javascript文件下载到您的网络服务器(例如:js文件夹)并从那里参考

<script src="js/papaparse.min.js"></script>

或者可以引用任何主持papaparse的CDN,类似于你正在使用google的jsapi

示例:

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>