Highcharts CSV数据加载 [英] Highcharts csv data loading
问题描述
我正在尝试为highcharts基本柱形图加载csv数据.
I'm trying to load csv data for a highcharts basic column chart.
我在这里使用最新的数据模块方法，而不是像旧方法一样进行解析 ( http://www.highcharts.com/docs/working-with-数据/数据模块)
I'm using the latest data-module method here and not parsing like the old method ( http://www.highcharts.com/docs/working-with-data/data-module )
我已经加载了所有js库&所需的模块(图表，导出和数据文件)并使用以下代码:
I have loaded all js libraries & modules needed (highcharts, exporting & data files) and used the following codes :
HTML:
<body>
<h1>
<img src="images/header.png" alt= " This is header! "height = "100px"; width ="1350px">
</h1>
<div id="container">
</div>
</body>
JavaScript:
Javascript :
console.log("Enters")
$.get('test.csv', function(csv) {
console.log("Function")
$('#container').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
console.log("Function ends");
我的屏幕是空的，只有标题显示
My screen is empty with only the header display
我的控制台显示如下:
Enters
Function ends
在javascript代码中，$.get函数不起作用，并且不仅在内部. 这是怎么了?我是否缺少一些关于jquery和/或highcharts的基本信息?
In the javascript code, $.get function is not working and it's not going inside only. What is going wrong here? Am i missing something very basic on jquery and/or highcharts?
任何反馈都将受到赞赏
更新:
所以，我发现了这个链接其中正在从在线CSV文件加载数据. 但是，没有其他链接显示从本地系统加载的数据.
So, I found this link wherein data is being loaded from an online CSV file. But, no other link shows data loaded from the local system.
我的文件位于:D:\ Optus \ H2 Reporting \ H2 Web Dashboard \ test.csv 该函数永远不会进入$ .get
My file is in : D:\Optus\H2 Reporting\H2 Web Dashboard\test.csv The function never enters inside $.get
如何使用$ .get函数访问此文件?
How do I access this file using $.get function?
推荐答案
如果您不熟悉requireJS( http://requirejs.org/)我高度建议将其检出.我认为它是我js工具箱中最重要的工具，几乎在我目前正在从事的每个项目中都使用它. requireJS负责异步模块的加载.使用文本插件，我们可以为模板加载csv，json或任何其他纯文本资源(例如html).
If you're not familiar with requireJS (http://requirejs.org/) I highly recommend checking it out. I consider it the most important tool in my js-toolbox and use it in nearly every project that I'm currently working on. requireJS takes care of asynchronous module loading. With the text-plugin we can load csv, json or any other plain-text asset like html for your templates.
这是我在您遇到的情况下要做的事情:
This is what I would do in your situation:
/bower.json(依赖项)
/bower.json (dependencies)
{
"dependencies": {
"requirejs": "~2.1.20",
"text": "requirejs/text#~2.0.14"
}
}
/index.html
/index.html
<html>
<body>
</body>
<script data-main="js/index" src="bower_components/requirejs/require.js"></script>
</html>
/js/index.js
/js/index.js
// define dependenies
require.config({
paths: {
text : '/bower_components/text/text',
csvLoader : '/js/csv-loader'
}
});
// Start the application
require( ['csvLoader'], function( csvLoader ){
console.log( csvLoader.getData() );
});
/js/csvLoader.js
/js/csvLoader.js
define([
'text!/assets/data.csv'
], function( csv ){
return {
getData : function () {
return csv;
}
}
});
/assets/data.csv
/assets/data.csv
id,username,ip
1,jrobertson0,20.206.114.95
2,spierce1,238.8.242.238
3,smoreno2,248.138.97.13
4,ghenry3,112.134.36.7
5,itaylor4,153.211.95.58
运行此命令时，requireJS确保csv-loader.js及其依赖项，即.会加载data.txt并在 console.log( csvLoader.getData() );被调用之前可用.
When this is run, requireJS makes sure that csv-loader.js and it's dependency, ie. the data.txt are loaded and available before console.log( csvLoader.getData() ); gets called.
或者，您可以执行var myData = csvLoader.getData();
您现在可以想象到，可以使用requireJS处理所有模块依赖项！
As you can probably imagine by now, you can use requireJS to handle all your module dependencies!
我希望这会有所帮助！编码愉快=)
I hope this helps! Happy coding =)
P.S.请注意，在ES6中，由于本机支持模块加载，所以requireJS变得非常多余.
P.S. Do note that with ES6, requireJS becomes quite redundant as module loading is supported natively.
这篇关于Highcharts CSV数据加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
