3

JavaScript と HighCharts は初めてです。これは非常に単純な質問だと思いますが、迷子になりました。3 本の線で構成される散布図を作成したいと考えています。テキスト ファイルからデータを読み取る必要があり、ファイルは次のようになります。

x   y1  y2  y3

1.02 1.00 6.70 8.19
2.04 1.00 13.30 8.19
3.06 1.00 13.50 8.19
4.08 1.00 9.60 8.19
5.10 1.00 14.60 8.19
6.12 1.00 19.20 8.57

だから私は（xとy1）、（xとy2）、（xとy3）で3行をプロットする必要があります

そして、これは私のHighChartsコードです:

            <script type="text/javascript">

            $(document).ready(function() {
                var chart1 = new Highcharts.Chart(options);
            });

            var options = {
            chart: {
                    renderTo: 'container',
                type: 'scatter',            
                    zoomType: 'xy'
                },
            title: {
                   text: 'Demo'
                },
            xAxis: {
                title: {
            enabled: true,
            text: 'Time, ns'
            },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
                },
            yAxis: {
                title: {
            text: 'Value'
            }
                },
                series: []
            };

            $.get('///plot.txt', function(data) {
                var lines = data.toString().split('\n');
                $.each(lines, function(lineNo, line) {
                    var item = line.split()});
            options.series[0].data[0].push(parseFloat(item[0]));
            options.series[0].data[1].push(parseFloat(item[1]));

    options.series[1].data[0].push(parseFloat(item[0]));
                options.series[1].data[1].push(parseFloat(item[2]));

                options.series[2].data[0].push(parseFloat(item[0]));
                options.series[2].data[1].push(parseFloat(item[3]));

            }, 'text')

            var chart1 = new Highcharts.Chart(options);

            </script>

コード全体を台無しにした気がします。申し訳ありませんが、JavaScript を書いたことはありません。どんな助けでも大歓迎です。前もって感謝します。

4

2 に答える 2

4

それがあなたが手に入れたいものです：http://jsfiddle.net/z28vy/

今いくつかのコメント

ドキュメントを読む

jsfiddle のライブ例を使用して、非常に優れた HighChart ドキュメントを確認する必要があります。ユースケースに非常に近いものもあります (AJAX 呼び出しで取得したデータからのデータの表示)。

あなたのニーズに特有なのは、生のテキストデータを取得することです。これにより、面倒な解析が必要になります。

自分が何をしているかを理解する

コードが機能するようになったとしても、JavaScript の同期/非同期のストーリーを少しいじっているように見えます。あなたが初心者であれば、一度に多くのことを学ぶことができます。言うまでもなく、匿名関数を使用してjQueryスタイルに固執しようとしています...

インデント ！

まず、あなたの投稿だけなのか、それとも実際にそのようなコードを書いたのかはわかりませんが、適切にインデントしてください! 一目で多くの問題が表示されます。特に、囲まれたコード (たとえば、ajax 呼び出しの成功コールバック関数) を記述している場合。

配列

次に、ちょっとしたロジック: JavaScript の配列は動的ですが、割り当てられていないスロットではランダム アクセス (読み取りまたは書き込み) ができないことを知っておく必要があります。だからあなたがやっているとき

options.series[0].data[0].push(parseFloat(item[0]));

options オブジェクトがシリーズを空の配列として定義しているため、以前に options.series[0] を設定しておく必要があります。

series: []

使用するシリーズの数に必要な柔軟性に応じて、ajax 成功メソッドの時点で、またはオプション定義で静的にそれを行うことができます。最初はシンプルにして、次のことを行うことをお勧めします。

series: [{
            name: 'Serie 1',
            data: []
        },{
            name: 'Serie 2',
            data: []
        },{
            name: 'Serie 3',
            data: []
        }]

そのように、3つのシリーズのそれぞれにアクセスできます...同じ理由でどちらも存在しないdata [0]に同じ問題があることを除いて。とにかくあまり気にしないでください...

最初に API をそのまま使用する

とにかく、シリーズにポイントを追加する方法は複雑すぎます。シリーズには addPoint() メソッドがあります。それを使用してください! だから代わりに

 options.series[0].data[0].push(parseFloat(item[0]));
 options.series[0].data[1].push(parseFloat(item[1]));

やるだけ

 options.series[0].addPoint([parseFloat(item[0]), parseFloat(item[1])]);

それはすでに読みやすいです:)

jQuery は魔法のようなものではなく、単に論理的なものです

今あなたが抱えている問題は、jquery $.each() の使用です。あなたがそれを理解していなかっただけなのか、それとも使い始めたのかはわかりませんが、次に進むためにデータ処理をハードライトすることにしました。

$.each(lines, function(lineNo, line) {
    var item = line.split()});
options.series[0].data[0].push(parseFloat(item[0]));
options.series[0].data[1].push(parseFloat(item[1]));

インデントを開始して物事を区切るとはっきりとわかるように、目的もなく各行を分割するだけです。

分割で得たものを使用するだけです。現在のシリアル番号を serieIdx に入れているとします。

$.each(lines, function(lineNo, line) {
    var item = line.split(' ');
    if(item.length==4 && !isNaN(parseFloat(item[0]))) { // skip unwanted line such as header or empty line
        chart1.series[serieIdx].addPoint([parseFloat(item[0]), parseFloat(item[serieIdx+1])], false);
    }
});

それでおしまい。3 つのシリーズを繰り返すだけで、準備完了です。

HighCharts のセリエの addPoint に関する補足事項

無効なデータ (数値ではなく任意の配列など) を使用して addPoint を呼び出した場合、目に見えるエラーは発生しませんが、いずれにせよ何らかの問題が発生することに注意してください。私の場合、テストを追加する前に

if(item.length==4...

また、最初は最後の行の最後に「\ n」もあったため、上部の分割により最後の空の文字列が1つ得られました。これは明らかに、内側の分割の後に空のアイテム配列になりました。addPoint([NaN, NaN]) をトリガーして、グラフ全体でドット間の線を純粋に非表示にしました。そこは気をつけて！

jsfiddle サンプルについて

jsfiddle は明らかに AJAX の取得を許可しませんが、代わりにトリックを提供します: jsfiddle サーバーが指定された遅延の後に応答で再送信する json 内の POST データ (私の例では 3 秒を置きます)。

http://jsfiddle.net/z28vy/

于 2013-11-05T13:00:05.227 に答える