javascript - 防止谷歌图表中的默认排序事件

Question

是否可以防止在 google 图表表对象中触发默认排序事件？如果我们以 code playground 中的示例为例这怎么能被调整以便例如。单击“年龄”标题时防止排序发生？

即对表格图表不做任何事情(我的想法是在所有标题中进行默认排序，除了一个标题，其中另一个点击事件(由外部 js 中的事件监听器管理将触发)将被触发但不触发排序事件(因此没有出现小排序箭头))

例如，下面的代码不起作用(它仍然调用默认的排序方法):

function drawVisualization() {
var table = new google.visualization.Table(document.getElementById('table'));
table.draw(sortData, null);

var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(sortData, null);

google.visualization.events.addListener(table, 'sort',
  function(event) {
    if(event.column != 1){
      sortData.sort([{column: event.column, desc: !event.ascending}]);
      chart.draw(sortData, null);
    }
  }
);
}

谢谢指点

Answer 1

将表格的sort 选项设置为event。这将禁用默认排序并使图表在单击标题时抛出“排序”事件。如果您想正确跟踪排序，您需要使用 sortColumn 和 sortAscending 选项集重新绘制图表:

var options = {
    sort: 'event'
};
google.visualization.events.addListener(table, 'sort', function(event) {
    if(event.column != 1) {
        options.sortColumn = event.column;
        options.sortAscending = event.ascending;
        sortData.sort([{column: event.column, desc: !event.ascending}]);
        table.draw(sortData, options);
    }
});

[编辑 - 使用自定义表格排序功能的完整代码，基于 playground 代码]

function drawVisualization() {
    var options = {
        sort: 'event'
    };
    var table = new google.visualization.Table(document.getElementById('table'));
    table.draw(sortData, options);

    var chart = new google.visualization.BarChart(document.getElementById('chart'));
    chart.draw(sortData, null);

    google.visualization.events.addListener(table, 'sort', function(event) {
        if(event.column != 1) {
            options.sortColumn = event.column;
            options.sortAscending = event.ascending;
            sortData.sort([{column: event.column, desc: !event.ascending}]);
            table.draw(sortData, options);
        }
    });
}