排名谷歌可視化表

所以我到目前爲止是一個排名表，首先你看到主表（allstores表），當你點擊排名頭另一個表與業主存儲彈出顯示業主排名對於其他競爭對手的商店。我想要的是主表中每個標題上的箭頭排序事件。我確實找到了一些解決方案，但是通過這種解決方案，它不會顯示所有者存儲表。您可以在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], 
    ]);

來源

2016-01-05 JeenaP

一些變化...
只能設置一個回調函數。
在調用回調之前，不要在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>

來源

2016-01-05 23:09:56 WhiteHat

希望這有助於排序箭頭只會顯示在當前排序的列。您單擊一次升序，再次降序。讓我知道，如果我錯過了什麼... – WhiteHat

嘿排序功能是我想要的，但我仍然希望頂級表改變它的排名順序相對於第二張表，它現在沒有做，任何想法如何將？ – JeenaP

不確定我關注。你是否希望頂層表根據什麼時候自動排序，以及何時對下層表進行排序？我們可以做... – WhiteHat

排名谷歌可視化表

回答

相關問題