Highcharts CSV数据加载

Question

I'm trying to load csv data for a highcharts basic column chart. 我正在尝试为highcharts基本柱形图加载csv数据。

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 ) 我在这里使用最新的数据模块方法，而不是像旧方法那样进行解析（ http://www.highcharts.com/docs/working-with-data/data-module ）

I have loaded all js libraries & modules needed (highcharts, exporting & data files) and used the following codes : 我已经加载了所有需要的js库和模块（图表，导出和数据文件），并使用了以下代码：

HTML : 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 我的屏幕是空的，只有标题显示

My console display is as follows : 我的控制台显示如下：

Enters
Function ends

In the javascript code, $.get function is not working and it's not going inside only. 在javascript代码中，$ .get函数无法正常工作，并且不仅限于内部。 What is going wrong here? 这是怎么了？ Am i missing something very basic on jquery and/or highcharts? 我是否缺少一些关于jquery和/或highcharts的基本信息？

Any feedback is highly appreciated 任何反馈都受到高度赞赏

Update : 更新：

So, I found this link wherein data is being loaded from an online CSV file. 因此，我找到了此链接，其中的数据是从在线CSV文件加载的。 But, no other link shows data loaded from the local system. 但是，没有其他链接显示从本地系统加载的数据。

My file is in : D:\\Optus\\H2 Reporting\\H2 Web Dashboard\\test.csv The function never enters inside $.get 我的文件位于：D：\\ Optus \\ H2 Reporting \\ H2 Web Dashboard \\ test.csv该函数从不输入$ .get内

How do I access this file using $.get function? 如何使用$ .get函数访问此文件？

Answer 1

If you're not familiar with requireJS ( http://requirejs.org/ ) I highly recommend checking it out. 如果您不熟悉requireJS（ http://requirejs.org/ ），我强烈建议您检查一下。 I consider it the most important tool in my js-toolbox and use it in nearly every project that I'm currently working on. 我认为它是我js工具箱中最重要的工具，几乎在我目前正在从事的每个项目中都使用它。 requireJS takes care of asynchronous module loading. requireJS负责异步模块的加载。 With the text-plugin we can load csv, json or any other plain-text asset like html for your templates. 使用文本插件，我们可以为模板加载csv，json或任何其他纯文本资源（例如html）。

This is what I would do in your situation: 这是我在您的情况下会做的事情：

/bower.json (dependencies) /bower.json（依赖项）

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

When this is run, requireJS makes sure that csv-loader.js and it's dependency, ie. 当运行时，requireJS确保csv-loader.js及其依赖项，即。 the data.txt are loaded and available before console.log( csvLoader.getData() ); data.txt 在 console.log( csvLoader.getData() ); 之前已加载并可用console.log( csvLoader.getData() ); gets called. 被叫。

Alternatively you could do var myData = csvLoader.getData(); 或者，您可以执行var myData = csvLoader.getData();

As you can probably imagine by now, you can use requireJS to handle all your module dependencies! 如您现在可能想象的那样，您可以使用requireJS处理所有模块依赖项！

I hope this helps! 我希望这有帮助！ Happy coding =) 快乐编码=）

PS Do note that with ES6, requireJS becomes quite redundant as module loading is supported natively. PS请注意，在ES6中，由于本机支持模块加载，所以requireJS变得非常多余。

Highcharts CSV数据加载

问题描述

1 个解决方案

解决方案1
1 2015-12-02 09:34:03

Highcharts CSV数据加载

问题描述

1 个解决方案

解决方案1 1 2015-12-02 09:34:03

解决方案1
1 2015-12-02 09:34:03