1

ハイチャートの基本的な縦棒グラフの csv データを読み込もうとしています。

ここでは最新のデータ モジュール メソッドを使用しており、古いメソッドのように解析していません ( http://www.highcharts.com/docs/working-with-data/data-module )

必要なすべての js ライブラリとモジュール (ハイチャート、エクスポートとデータ ファイル) をロードし、次のコードを使用しました。

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 で非常に基本的なものが欠けていますか?

どんなフィードバックでも大歓迎です

アップデート ：

そこで、オンラインの CSV ファイルからデータが読み込まれているこのリンクを見つけました。ただし、ローカル システムからロードされたデータを表示する他のリンクはありません。

私のファイルは次の場所にあります: D:\Optus\H2 Reporting\H2 Web Dashboard\test.csv 関数が $.get 内に入ることはありません

$.get 関数を使用してこのファイルにアクセスするにはどうすればよいですか?

4

1 に答える 1

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 とその依存関係を確認します。data.txt が読み込まれ、呼び出される前に使用可能になります。 console.log( csvLoader.getData() );

あるいは、あなたがすることができますvar myData = csvLoader.getData();

おそらく想像できると思いますが、requireJS を使用してすべてのモジュールの依存関係を処理できます。

これが役立つことを願っています！幸せなコーディング =)

PS ES6 では、モジュールの読み込みがネイティブでサポートされているため、requireJS は非常に冗長になることに注意してください。

于 2015-12-02T09:34:03.863 に答える