1

使用谷歌可视化库，但我认为这并不重要。

我有一个名为data.Hwith 的变量，长度为5

我想在这里循环一下：

var cols = new Array();
        for (var x = 1; x < data.H.length + 1; x++) {
          var idx = x - 1;
          console.log(idx);
          cols.push({
              type: 'number',
              label: data.getColumnLabel(idx),
              calc: function (dt, row) {
                  console.log("row: ", row, "Idx: ",idx);
                  var val = dt.getValue(0, idx); // this is always 5
                  for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
                      total += dt.getValue(row, i);
                  }
                  var percent = val / total;
                  return {v: percent, f: (percent * 100).toFixed(2) + '%'}; // return value and value
              }
          });
        };
        view.setColumns(cols);

问题是我的calc方法需要参考idx。但是 idx 始终为 5。每个循环上应为 1、2、3、4 和 5。

这里发生了什么？如何让 calc 函数在循环时引用数字？

4

1 回答 1

1

当您调用 calc 方法时，循环已经完成，所有 calc 函数都将保持对（相同）的引用并处x于其idx最后状态。您需要引入另一个功能/范围，以便能够“冻结”每个特定idx的 . （语法上）最简单的方法是创建一个单独的函数，该函数idx作为参数，并返回另一个函数。

function createCalcFunction(idx) {
    return function (dt, row) {
        /* make a local copy */
        var localIdx = parseInt(idx, 10);
        console.log("row: ", row, "Idx: ",localIdx);

        var val = dt.getValue(0, localIdx);

        for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) {
          total += dt.getValue(row, i);
        }
        var percent = val / total;
        return {v: percent, f: (percent * 100).toFixed(2) + '%'}; // return value and value
    }
}

var cols = [];
for (var x = 1; x < data.H.length + 1; x++) {
    var idx = x - 1;
    console.log(idx);
    cols.push({
        type: 'number',
        label: data.getColumnLabel(idx),
        calc: createCalcFunction(idx);
    });
};
view.setColumns(cols);
于 2013-09-19T19:11:12.537 回答