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>

Here is a jsFiddle

更新

将变量更新为非全局变量后，图表现在显示正确，但仍会将两个相同的值添加到数组中。代码已更新以反映更改。

Answer 1

我还没有消化你的整个代码，但你正在做的一个真正致命的陷阱是在你的函数中使用未使用var声明的变量（我特别关注你的方式） ve在两个函数上都使用了bar变量。）

当您使用变量而未使用var声明变量时，就像您在此处所做的那样，您将变量带到全局可见性。这意味着该变量与代码中的任何地方（大多数）使用的变量相同。第一个函数中的bar与第二个函数中的bar相同。

当你的两个函数启动时，它首先要做的是清除bar变量（即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且this is how it is treated as visible here.

由于您不喜欢这种方式，我猜您在数据变量{（3}}

中出现格式错误

因此，我认为以下是您所遵循的格式：

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

此外，在单击条形图的条形图时，您可以as we can see here the 'gap' is gone.。在那里，您可以看到如何捕获点击以及如何打开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"]
 ]
]

jQuery每个都在函数之外

更新

5 个答案: