Question

我正在尝试加载高图基本柱形图的csv数据。

我在这里使用最新的数据模块方法，而不是像旧方法一样解析（http://www.highcharts.com/docs/working-with-data/data-module）

我已加载所有js库＆amp;需要的模块（高图，导出和数据文件）并使用以下代码：

HTML：

<body>
    <h1>
        <img src="images/header.png" alt= " This is header! "height = "100px"; width ="1350px">
    </h1>

    <div id="container">
    </div>
</body>

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

我的屏幕为空，只有标题显示

我的控制台显示如下：

Enters
Function ends

在javascript代码中，$ .get函数无效，并且它不会仅进入内部。这里出了什么问题？我在jquery和/或highcharts上遗漏了一些非常基本的东西吗？

非常感谢任何反馈

更新：

所以，我发现这个link，其中数据是从在线CSV文件加载的。但是，没有其他链接显示从本地系统加载的数据。

我的文件位于：D：\ Optus \ H2 Reporting \ H2 Web Dashboard \ test.csv 该函数永远不会进入$ .get

如何使用$ .get函数访问此文件？

Answer 1

如果您不熟悉requireJS（http://requirejs.org/），我高度建议您查看它。我认为它是我的js-toolbox中最重要的工具，并且几乎在我目前正在进行的每个项目中使用它。 requireJS负责异步模块加载。使用text-plugin，我们可以为您的模板加载csv，json或任何其他纯文本资源（如html）。

这就是我在你的情况下会做的事情：

/bower.json（依赖项）

{
  "dependencies": {
    "requirejs": "~2.1.20",
    "text": "requirejs/text#~2.0.14"
  }
}

/index.html

<html>
    <body>
    </body>
    <script data-main="js/index" src="bower_components/requirejs/require.js"></script>
</html>

/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

define([
  'text!/assets/data.csv'   
], function( csv ){
    return {
        getData : function () {
            return 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和它的依赖关系，即。在调用 console.log( csvLoader.getData() );之前，data.txt已加载并可用。

或者你可以var myData = csvLoader.getData();

正如您现在可能想象的那样，您可以使用requireJS来处理所有模块依赖项！

我希望这有帮助！快乐编码=）

P.S。请注意，对于ES6，requireJS变得非常冗余，因为本机支持模块加载。

Highcharts csv数据加载

1 个答案: