Question

所以到目前为止我所拥有的是一个排名表，首先你看到主表（allstores Table），当你点击排名标题时，另一个表会显示所有者商店，其中显示所有者排名相对于另一个竞争对手店。我想要的是主表中每个标题上的箭头排序事件。我确实找到了一些解决方案，但是通过这个解决方案，它不会显示所有者商店表。您可以在JsFiddle中看到我的代码。

google.setOnLoadCallback(draw);
google.setOnLoadCallback(drawMystores);

var data = new google.visualization.DataTable();

function allStores() {
  data.addColumn('number', 'Rank');
  data.addColumn('string', 'Store Name');
  data.addColumn('number', ' Sales');
  data.addColumn('number', 'SOS');

  var Raw= ([
    [1 ,'Bayfair',  4895, 68 ],
    [2 ,'Greerton',  3158,  126],
    [3 ,'Frankton',  3689,  79],
    [4 ,'Mt Manganui', 3069,  72],
    [5 ,'Tauranga', 2689 , 68],
    [6 ,'Te Rapa',  2269,  143],
    [7 ,'The Base', 1895,  125],
  ]);

Answer 1

一些变化......
只设置一个回调函数在调用回调之前，不要在google命名空间下创建内容。

在这里，我使用sort事件对两个表进行相同的排序......

var data;
var data2;
var Table;
var table2;
var view;
var formatter;
var options = {
  showRowNumber: false,
  width: '100%',
  height: '100%',
  sort: 'enable',
  sortAscending: true,
  sortColumn: 0
}

var array;
var dollarSign= '$';

google.load('visualization', '1', {'packages': ['table'], 'callback': draw});

function allStores() {
  data.addColumn('number', 'Rank');
  data.addColumn('string', 'Store Name');
  data.addColumn('number', ' Sales');
  data.addColumn('number', 'SOS');
  var Raw= ([
    [1 ,'Bayfair',  4895, 68 ],
    [2 ,'Greerton',  3158,  126],
    [3 ,'Frankton',  3689,  79],
    [4 ,'Mt Manganui', 3069,  72],
    [5 ,'Tauranga', 2689 , 68],
    [6 ,'Te Rapa',  2269,  143],
    [7 ,'The Base', 1895,  125],
  ]);
  data.addRows(Raw);
  var sorted = Raw.slice().sort(function(a,b){return b-a})
  var ranks = Raw.slice().map(function(v){ return sorted.indexOf(v)+1 });
  var formatter = new google.visualization.NumberFormat({ prefix: '$' });
  formatter.format(data, 2);
}

function draw() {
  formatter = new google.visualization.NumberFormat({ prefix: '$' });
  data = new google.visualization.DataTable();
  allStores();
  Table = new google.visualization.Table(document.getElementById('table_div'));
  google.visualization.events.addListener(Table, 'sort', sortTables);
  sortTables();
}

function sortTables(userSort) {
  if (userSort) {
    options.sortColumn = userSort.column;
    options.sortAscending = userSort.ascending;
  }
  data.sort({column: options.sortColumn, desc: (!options.sortAscending)});
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    data.setValue(i, 0, i + 1);
  }
  initialiseColumns();
  Table.draw(data, options);
  table2.draw(data2, options);
}

function initialiseColumns() {
  view = new google.visualization.DataView(data);
  data2 = new google.visualization.DataTable();
  data2.addColumn('number', 'Rank');
  data2.addColumn('string', 'Store Name');
  data2.addColumn('number', 'Sales');
  data2.addColumn('number', 'SOS');
  array = [];
  myStores();

  for (var j = 0; j < array.length; j++) {
    data2.addRow([array[j][0], array[j][1], array[j][2], array[j][3]]);
    formatter.format(data2, 2);
  }

  table2 = new google.visualization.Table(document.getElementById('table_div1'));
  google.visualization.events.addListener(table2, 'sort', sortTables);
}

function myStores() {
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    if (view.getValue(i, 1) == 'The Base' || view.getValue(i, 1) == 'Greerton') {
        array.push([view.getValue(i, 0), view.getValue(i, 1), view.getValue(i, 2), view.getValue(i, 3)]);
    }
  }
}

<script src="https://www.google.com/jsapi"></script>
<body style='background-color:beige;'>
  <div id='Text'>
    <h1 style='color: purple;'>
      Rank Table
    </h1>
  </div>
  <div id="test1"></div>
  <div id="test2"></div>
  <br/>
  <i class="material-icons"></i>
  <div style='color:purple; ' id="table_div1"></div>
  <br/>
  <div style='color:purple;' id="table_div"></div>
</body>

对Google可视化表进行排名

1 个答案: