Highcharts csv数据加载答案

【问题标题】：Highcharts csv data loadingHighcharts csv数据加载
【发布时间】：2015-12-01 14:27:12
【问题描述】：

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

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

我已经加载了所有需要的 js 库和模块（highcharts、导出和数据文件）并使用了以下代码：

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 函数访问此文件？

【问题讨论】：

jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/…这个链接会帮助你
你不能使用 $.get 来导入这样的静态东西（除非你有东西为你的客户提供服务）。在这些情况下，我将 requireJS 与文本插件一起使用：github.com/requirejs/text
@Pragnesh：是的，我已经看到了，但我有一个外部 CSV。在示例中，他们将 csv 作为 html 标签加载。任何带有 highcharts 的外部 csv 示例？ @codebreaker：谢谢你的解释，你能分享一个例子，你用带有文本插件的requireJS加载csv吗？
请仔细阅读我之前的评论。在这里你可以找到同样的问题：stackoverflow.com/questions/6923707/… - 你可以看到这不是 Highcharts 或 jQuery 相关的问题，而是一般来说 - JavaScript 是如何工作的。
我不是 d3.csv 的专家（你有一些这样的示例吗？），但在这里你可以回答，如何加载本地文件：stackoverflow.com/questions/19902538/…

标签： javascript jquery csv highcharts socrata

【解决方案1】：

如果您不熟悉 requireJS (http://requirejs.org/)，我高度建议您检查一下。我认为它是我的 js-toolbox 中最重要的工具，并且几乎在我目前正在从事的每个项目中都使用它。 requireJS 负责异步模块加载。使用文本插件，我们可以为您的模板加载 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 及其依赖项，即。 data.txt 已加载并在 console.log( csvLoader.getData() ); 被调用之前可用。

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

你现在可能已经想象到了，你可以使用 requireJS 来处理你所有的模块依赖！

我希望这会有所帮助！快乐编码 =)

附：请注意，在 ES6 中，由于原生支持模块加载，requireJS 变得非常多余。

【讨论】：