Question

我一直在使用this posting中的代码来确定我在Google Visualization表中的坐标位置。在没有分页的表上运行良好。

启用分页后，单击页面1内的单元格时坐标将工作，但在激活页面2后将停止工作。

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable', //THIS HAS BEEN ADDED
      pageSize: '3'      
    }
});

有什么线索可以使坐标在第2页上工作吗？

通过单击第2页上的第一条记录，我需要知道我在第3行x列中。一如既往的谢谢你！

这是我的完整代码示例（原始）。

google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls', 'charteditor']
});

renderChart_onPageLoad();

function renderChart_onPageLoad() {
  google.charts.setOnLoadCallback(function() {
    drawTable();
  }); //END setOnLoadCallback
} //END function renderChart_onEvent

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);
  console.log('jsonArray'); console.log(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray, false); // 'false' means that the first row contains labels, not data.
  //console.log('data');
  //console.log(data);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        //'label': 'Actual State:',
        //'labelSeparator': ':',
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'      
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'ready', function() {
    var container = document.getElementById(table.getContainerId());
    Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
      cell.addEventListener('click', selectCell);
    });

    function selectCell(sender) {
      var cell = sender.target;
      var row = cell.closest('tr');
      document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

      //NEW additional requirements

      var tableDataView = table.getDataTable();

      var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
      var selectedCol = cell.cellIndex;

      document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

      var colID = tableDataView.getColumnId(selectedCol);
      var colLabel = tableDataView.getColumnLabel(selectedCol);

      document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
    }

  });

}





//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='div_dashboard'>
  <div id='div_categoryPicker1'></div>
  <div id='div_table'></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>

<script>
  var json = [{
      "division": "GS",
      "m1": 100.000000,
      "m2": 100.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "GS",
      "m1": 100.000000,
      "m2": 90.000000,
      "m3": null,
      "m4": null,
      "m5": null,
      "m6": null,
      "m7": null,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": null,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 75.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    },
    {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }, {
      "division": "PS",
      "m1": null,
      "m2": null,
      "m3": 100.000000,
      "m4": 100.000000,
      "m5": 100.000000,
      "m6": 100.000000,
      "m7": 80.000000,
      "m8": null,
      "m9": null,
      "m10": null,
      "m11": null,
      "m12": null,
    }
  ];

</script>

Answer 1

坐标停止在下一页上运行，
因为分配了'click'事件的单元格，
已经被新的电池取代了。
（当通过单击列标题对表进行排序时，也会发生同样的事情）

启用每页上和每种排序后的坐标，
监听表的'page'和'sort'事件，
然后在新单元格上重新应用'click'事件。

page事件具有所选页面的属性。
保存页码并乘以页面大小，
为显示的页面获取正确的行索引。

以下为相关代码...

google.visualization.events.addListener(table, 'ready', function() {
  // initialize page number and size
  var page = 0;
  var pageSize = 10;
  if (table.getOption('page') === 'enable') {
    page = table.getOption('startPage');
    pageSize = table.getOption('pageSize');
  }
  enableCoordinates();

  // page event
  google.visualization.events.addListener(table.getChart(), 'page', function(sender) {
    page = sender.page;  // save current page
    enableCoordinates();
  });

  // sort event
  google.visualization.events.addListener(table.getChart(), 'sort', function() {
    page = 0;  // reset back to first page
    enableCoordinates();
  });

  function enableCoordinates() {
    var container = document.getElementById(table.getContainerId());
    Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
      cell.addEventListener('click', selectCell);
    });
  }

  function selectCell(sender) {
    var cell = sender.target;
    var row = cell.closest('tr');
    document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

    //NEW additional requirements

    var tableDataView = table.getDataTable();

    var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
    selectedRow = (page * pageSize) + selectedRow;  // adjust for page number
    var selectedCol = cell.cellIndex;

    document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

    var colID = tableDataView.getColumnId(selectedCol);
    var colLabel = tableDataView.getColumnLabel(selectedCol);

    document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
  }
});

请参阅以下工作片段...

var json = [{
    "division": "GS",
    "m1": 100.000000,
    "m2": 100.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "GS",
    "m1": 100.000000,
    "m2": 90.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": null,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 75.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }
];

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls', 'charteditor']
}).then(drawTable);

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'ready', function() {
    // initialize page number and size
    var page = 0;
    var pageSize = 10;
    if (table.getOption('page') === 'enable') {
      page = table.getOption('startPage');
      pageSize = table.getOption('pageSize');
    }
    enableCoordinates();

    // page event
    google.visualization.events.addListener(table.getChart(), 'page', function(sender) {
      page = sender.page;  // save current page
      enableCoordinates();
    });

    // sort event
    google.visualization.events.addListener(table.getChart(), 'sort', function() {
      page = 0;  // reset back to first page
      enableCoordinates();
    });

    function enableCoordinates() {
      var container = document.getElementById(table.getContainerId());
      Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
        cell.addEventListener('click', selectCell);
      });
    }

    function selectCell(sender) {
      var cell = sender.target;
      var row = cell.closest('tr');
      document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

      //NEW additional requirements

      var tableDataView = table.getDataTable();

      var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
      selectedRow = (page * pageSize) + selectedRow;  // adjust for page number
      var selectedCol = cell.cellIndex;

      document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

      var colID = tableDataView.getColumnId(selectedCol);
      var colLabel = tableDataView.getColumnLabel(selectedCol);

      document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;
    }

  });
}





//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
  <div id="div_categoryPicker1"></div>
  <div id="div_table"></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>

编辑-分类

排序时，基础数据表未排序，
只是屏幕上的图表。
之后，屏幕上显示的行索引将与数据表中的行索引不匹配。

为了使两者同步以从数据表中获取数据，
您必须使用图表方法-> getSortInfo()

getSortInfo()返回具有以下属性的对象...

{"column":0,"ascending":false,"sortedIndexes":[6,5,4,3,2,1,0]}

然后我们可以使用选定的行，
从"sortedIndexes"中提取相应的数据表行索引。

selectedRow = sortInfo.sortedIndexes[selectedRow];

请参阅以下工作片段...

var json = [{
    "division": "GS1",
    "m1": 100.000000,
    "m2": 100.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "GS2",
    "m1": 100.000000,
    "m2": 90.000000,
    "m3": null,
    "m4": null,
    "m5": null,
    "m6": null,
    "m7": null,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS1",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": null,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 75.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS2",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  },
  {
    "division": "PS3",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS4",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }, {
    "division": "PS5",
    "m1": null,
    "m2": null,
    "m3": 100.000000,
    "m4": 100.000000,
    "m5": 100.000000,
    "m6": 100.000000,
    "m7": 80.000000,
    "m8": null,
    "m9": null,
    "m10": null,
    "m11": null,
    "m12": null,
  }
];

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls', 'charteditor']
}).then(drawTable);

function drawTable() {
  var jsonArray = jsonDataArray_1to1(json);

  //Modify header row to include id and label
  jsonArray = arrayHeaderRow_id_label_date(jsonArray);

  var data = google.visualization.arrayToDataTable(jsonArray);

  var dashboard = new google.visualization.Dashboard(document.getElementById('div_dashboard'));

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'div_categoryPicker1',
    'matchType': 'any',
    'options': {
      'filterColumnIndex': 0, //Column used in control
      'ui': {
        'labelStacking': 'vertical',
        'selectedValuesLayout': 'belowWrapping',
        'allowTyping': false,
        'allowMultiple': false,
        'allowNone': true
      }
    }
  });

  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {
      allowHtml: true,
      page: 'enable',
      pageSize: '3'
    }
  });

  dashboard.bind([categoryPicker1], [table]);
  dashboard.draw(data);

  google.visualization.events.addListener(table, 'ready', function() {
    // initialize page number and size
    var page = 0;
    var pageSize = 10;
    if (table.getOption('page') === 'enable') {
      page = table.getOption('startPage');
      pageSize = table.getOption('pageSize');
    }
    enableCoordinates();

    // page event
    google.visualization.events.addListener(table.getChart(), 'page', function(sender) {
      page = sender.page;  // save current page
      enableCoordinates();
    });

    // sort event
    google.visualization.events.addListener(table.getChart(), 'sort', function() {
      page = 0;  // reset back to first page
      enableCoordinates();
    });

    function enableCoordinates() {
      var container = document.getElementById(table.getContainerId());
      Array.prototype.forEach.call(container.getElementsByTagName('TD'), function(cell) {
        cell.addEventListener('click', selectCell);
      });
    }

    function selectCell(sender) {
      var cell = sender.target;
      var row = cell.closest('tr');
      document.getElementById('output1').innerHTML = "Row: " + (row.rowIndex - 1) + " Column: " + cell.cellIndex;

      //NEW additional requirements

      var tableDataView = table.getDataTable();

      var selectedRow = row.rowIndex - 1;  // adjust for header row (-1)
      selectedRow = (page * pageSize) + selectedRow;  // adjust for page number
      var sortInfo = table.getChart().getSortInfo();  // save sorted info
      if (sortInfo.sortedIndexes !== null) {
        selectedRow = sortInfo.sortedIndexes[selectedRow];
      }
      var selectedCol = cell.cellIndex;

      document.getElementById('output2').innerHTML = "selectedRow: " + selectedRow + " selectedCol: " + selectedCol;

      var colID = tableDataView.getColumnId(selectedCol);
      var colLabel = tableDataView.getColumnLabel(selectedCol);

      document.getElementById('output3').innerHTML = "colID: " + colID + " colLabel: " + colLabel;

      document.getElementById('output4').innerHTML = tableDataView.getValue(selectedRow, 0);
    }

  });
}

//Library

function jsonDataArray_1to1(json) {
  //DYNAMIC JSON ARRAY

  var dataArray_cln = [];

  //A. The desired table requires the fixed columns of ..... to ..... these are directly taken from the JSON.
  var dataArray_keys = Object.keys(json[0]);

  dataArray_cln.push(dataArray_keys);

  //Add rows 1 to json.length with null values
  var dataArray_rows = json.length;
  var dataArray_cols = dataArray_keys.length;

  for (i = 0; i < dataArray_rows; i++) {
    dataArray_cln.push(Array(dataArray_cols).fill(null));
  }

  //Update array from json data
  for (i = 0; i < dataArray_rows; i++) {
    //[i + 1] because row 0 is the header, push begins with row 1
    //dataArray_cln[row][col]

    //Content in row "i" is positioned into dataArray_cln[row][col] incrementing "j" to pull each key name from dataArray_keys
    for (var j = 0; j < dataArray_keys.length; j++) {
      eval('dataArray_cln[i + 1][' + j + '] = json[i].' + dataArray_keys[j]);
    }
  }

  //console.log(dataArray_cln);
  return dataArray_cln;
}

function arrayHeaderRow_id_label_date(arr) {
  for (var i = 0; i < arr[0].length; i++) {
    var valueOrig = arr[0][i];
    var valueNew;
    switch (true) {
      case valueOrig === 'wd':
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label":"' + valueOrig + '", "type": "date"}');
        break;
      default:
        valueNew = JSON.parse('{"id":"' + valueOrig + '", "label": "' + valueOrig + '"}');
    }
    arr[0][i] = valueNew;
  }
  return arr;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
  <div id="div_categoryPicker1"></div>
  <div id="div_table"></div>
</div>

<div id="output1"></div><br/>
<div id="output2"></div><br/>
<div id="output3"></div><br/>
<div id="output4"></div><br/>

Google Visualization表格图表点击并返回行/列值在启用分页时不起作用

1 个答案: