如何使用函数对Google Charts DataTable或DataView进行排序？

Question

我有一个DataTable需要在运行时使用计算值进行动态排序。我见过sort method that exists on DataTable，但这似乎只允许传递一个列，然后进行基本排序。

我想传递自定义排序比较功能;类似于如何处理Array.prototype.sort

Answer 1

您可以返回google.visualization.DataTable对象的JSON表示，然后应用arr.sort function使用比较函数进行排序。

下面提供了一个泛型函数，用于对DataTable进行排序：

function sortDataTable(dataTable,sortColumns)
{
    var json = dataTable.toJSON();
    var rows = JSON.parse(json).rows;
    rows.sort(function(a,b) {
        return sortColumns.func(a.c[sortColumns.column].v,b.c[sortColumns.column].v);
    });
    return new google.visualization.DataTable({cols: JSON.parse(json).cols, rows: rows});
}

示例

＆＃13;

＆＃13;

google.load("visualization", "1.1", { packages: ["table"] });
google.setOnLoadCallback(drawTable);

function drawTable() {
    
    getWeatherData(function (data) {
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, { showRowNumber: true, width: '100%', height: '100%' });
    });
}



function getWeatherData(complete) {
    $.getJSON('https://gist.githubusercontent.com/vgrem/2d1436388ae8872f149d/raw/7193623c50cf2e093989391182aa67aaf8fdad2b/WeatherData.json', function (json) {
        var dataTable = new google.visualization.DataTable(json);
        //dataTable.sort({column: 1, desc: true});
        dataTable = sortDataTable(dataTable,{column: 1, func: sortTemperature}); //sort by second column (Temperature)
        complete(dataTable);
    });
}


function sortTemperature(a,b){
     if (a < b)
        return -1;
     if (a > b)
        return 1;
     return 0;
}


function sortDataTable(dataTable,sortColumns)
{
    var json = dataTable.toJSON();
    var rows = JSON.parse(json).rows;
    rows.sort(function(a,b) {
        return sortColumns.func(a.c[sortColumns.column].v,b.c[sortColumns.column].v);
    });
    return new google.visualization.DataTable({cols: JSON.parse(json).cols, rows: rows});
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

＆＃13;

＆＃13;

＆＃13;