javascript - jQueryはそれぞれ関数の外に出ます

Question

リンクを追加したいjqPlotチャートがあり、配列を使用してそれを行う方法を見つけたと思います[[[1,2,"http://google.com"]],[[2,3,"http://yahoo.com]]]が、XML、jQuery、およびAjaxを介してこれをロードしようとすると、完全には機能しません。

問題は.each、このコードにある句の中にあると思います。

function getBars(xml)
{
var categoryid = 1;
var bars = [];
$(xml).find("category").each(
    function()
    {
        bars.push(loadBars(categoryid,$(this)));
        categoryid++;
    });
return bars;
}
function loadBars(categoryid,xml)
{
var bar = [];
var bars = [];
$(xml).find("bar").each(function()
{
    bar.push(parseInt(categoryid));
    bar.push(parseInt($(this).attr("size")));
    bar.push($(this).attr("link"));
    bars.push(bar);
});
    $("#debug").append("\nBAR:")
    debug2dArray(bars);
    return bars;
    }

XMLは次のようになります。

<?xml version="1.0"?>
    <chart>
    <category>
    <bar size="20" link="http://google.com"/>
    </category>
    <category>
    <bar size="70" link="http://yahoo.com" />
    </category>
    </chart>

これがjsFiddleです

アップデート

変数を非グローバルに更新した後、グラフは正しく表示されますが、同じ値の2つがまだ配列に追加されています。変更を反映するようにコードが更新されました。

Answer 1

私はまだコード全体を消化していませんが、あなたがしている本当に致命的な落とし穴の1つは、宣言されていない関数で変数を使用するvarことです（特にbar、両方の関数で変数をどのように使用したかを調べています） 。

varここで行っているように、変数を宣言せずに使用すると、変数がグローバルに表示されます。つまり、その変数は、コード内のあらゆる場所で（ほとんど）使用されている変数と同じです。bar最初の関数でも同じですbarが、2番目の関数でも同じです。

bar2つの関数が起動すると、最初に実行するのは変数（つまり）をクリアすることですbar = [];。それらは参照を共有しているためbar、一方の関数を呼び出すと、もう一方の関数が行ったことを事実上無効にします。

これはあなたの意図ですか？そうでない場合（またはそうでない場合）、変数をvar次のように宣言する必要があります。

var categoryId = 1, 
    bar = [];

Answer 2

var特にbars配列を使用して宣言された変数はありません。これにより、それらは暗黙的にグローバルになり、を呼び出すたびに変数を上書きしますloadBars。

Answer 3

の欠如に加えて、関数の終わりではなく、イテレータvarの終わりで変数を返しています。eachこれが実用的なフィドルです：http：//jsfiddle.net/fwRSH/1/

function loadBars(categoryid, xml) {
    var bar = [];
    var bars = [];
    $(xml).find("bar").each(function() {
        bar.push(parseInt(categoryid, 10));
        bar.push(parseInt($(this).attr("size"), 10));
        bar.push($(this).attr("link"));
        bars.push(bar);
        //$("#debug").append("\nBAR:"); //not defined in fiddle, commented out
        //debug2dArray(bars); //not defined in fiddle, commented out
    });
    return bars; //moved from end of "each" iterator to here.
}

function getBars(xml) {
    var categoryid = 1;
    var bars = [];
    $(xml).find("category").each(function() {
        bars.push(loadBars(categoryid, $(this)));
        categoryid++;
    });
    return bars;
}

$(document).ready(function() {
    var bars = [];
    $("div#barchart").css("background-color", "#F00");
    $("div#barchart").css("height", "200px");
    $("div#barhcart").css("width", "400px");
    //moved for debugging
    bars = getBars($('div#xmlDI'));
    /* returns:
     * [
     *     [
     *         [1, 20, "http://google.com"]
     *     ],
     *     [
     *         [2, 70, "http://yahoo.com"]
     *     ]
     * ]
     */
    $.jqplot("barchart", bars, {
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                fillToZero: true
            }
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ['one', 'two'],
                autoscale: true
            },
            yaxis: {
                autoscale: true
            }
        }
    });
});​

Answer 4

グラフをどのように表示するかわかりません。グラフに提供するデータは、一般的に「正しく」表示されるためです。次のように書く場合：

[
    [[1, 30, "http://google.com"], [2,0,""]],
    [[1,0,""],[2, 40, "http://yahoo.com"]]
]

...まったく同じ結果が得られます。ライブラリは、特定のシリーズに提供されていないデータが0であると想定しているため、ここで表示されているものとして扱われます。

この方法が気に入らないので、ここで「ギャップ」がなくなっていることがわかるように、データ変数のフォーマットエラーが発生したと思います。

したがって、私は以下があなたが求めているフォーマットだと思います：

[[
    [1, 30, "http://google.com"],
    [2, 40, "http://yahoo.com"]
]]

さらに、棒グラフの棒をクリックすると、問題に対する答えが役立つことがわかります。ここで、クリックをキャプチャする方法とURLを開く方法を確認できます。私はURLのグローバル配列を使用したので、必要に応じて少しだけ採用する必要があります。

Answer 5

XMLを解析するコード：

var bars = [], cat = 0;
$.ajax({
  type: 'GET',
  url: 'plotlinks.xml',
  dataType: "xml",
  cache: true,
  success: function(data, textStatus, jqXHR) {

    $(data).find("category").each( function() {
      var barSet = [cat];
      $(this).find("bar").each(function() {
        var $elt = $(this);
        barSet.push([$elt.attr('size'),$elt.attr('link')]);
      });
      cat++;
      bars.push(barSet);
    });

    // bars is an array; each element is an array. 
    // The first element in the inner array is the 
    // category "index" (0,1,2,...). All other 
    // elements represent a link for that category. 
    // Those elements are arrays of [size,url].
    alert($.stringifyJSON(bars)); 
  }
});

結果のjson：

[[0,
   ["20","http://google.com"]
 ],
 [1,
   ["70","http://yahoo.com"]
 ]
]