1

我有一个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

更新

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

4

5 回答 5

3

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

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

当您的两个函数启动时，它所做的第一件事就是清除bar变量（即bar = [];）。由于它们共享bar引用，调用一个函数有效地抵消了另一个函数所做的事情。

这是你的意图吗？如果不是（或什至如此），您应该使用以下命令声明您的变量var：

var categoryId = 1, 
    bar = [];
于 2012-06-18T17:03:09.593 回答
2

没有使用 声明任何变量var，尤其是bars数组。这导致它们是隐式全局的，并且每次调用时都会覆盖变量loadBars。

于 2012-06-18T17:02:54.773 回答
2

除了缺少 之外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
            }
        }
    });
});​
于 2012-06-18T17:44:19.233 回答
1

我不确定你希望你的图表是什么样子。因为一般而言，您提供给图表的数据是“正确”显示的。如果你用以下方式写它：

[
    [[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 数组，因此您只需要稍微采用它即可满足您的需要。

于 2012-06-18T17:45:48.043 回答
0

解析 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"]
 ]
]
于 2012-06-18T17:40:25.947 回答