为谷歌可视化表格列中的列添加自定义排序

Question

我已经成功完成了一个谷歌可视化表，其中的数据来自数据库。现在我只需要为一列添加自定义排序。例如，我有一列作为状态来显示实例的级别。它有几个限制，例如确定、关键等。当我使用当前排序顺序时，它会在顶部显示“确定”行。而不是我需要先显示“关键”行。为了做到这一点，我有另一列作为“关键”的级别 1，“正常”等的级别 2。我需要做的是当用户尝试对“状态”列进行排序时，该列应根据“级别”进行排序。

     google.visualization.events.addListener(table, 'sort',
              function(event) {

          if(event.column == 4){
               console.log("sorting column is "+event.column);


                data.sort([{column: event.column, desc: !event.ascending}]);
               chart.draw(view);
          }


              });

如何为Status列添加排序顺序（按级别排序）？

任何帮助将不胜感激。

Answer 1

这里有几个自定义排序表格图表的选项...

首先，您可以使用对象表示法来组合两列中的值...
将值 (v:) 设置为 Level，将格式化值 (f:) 设置为 Status
{v: 1, f: 'Critical'}

默认情况下，表格图表将使用该值进行排序
您还可以使用DataView 从计算中添加列

这里唯一的问题，列类型必须是'number'，因为这就是值...
图表将右对齐该列的单元格

如果你已经有自定义格式，没什么大不了的，可以使用css进行更正，如示例中

下一步，使用sort事件自定义排序...

设置配置选项 --> sort: 'event'

这告诉图表正在使用自定义排序并显示data“按顺序”

您还必须提供以下两个配置选项

  sortAscending: true,
  sortColumn: 0

这告诉图表在列标题上放置排序箭头的位置（向上/向下箭头）

所以如果你用 0 覆盖第 1 列的排序，
仍然需要设置配置选项 --> sortColumn: 1

请参阅下面的工作 sn-p，

第 1 列（状态）的排序被第 0 列（级别）覆盖
第 2 列（排序）使用上面提到的对象表示法

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Level', 'Status',   'Sort'],
      [1,       'Critical', {v: 1, f: 'Critical'}],
      [2,       'OK',       {v: 2, f: 'OK'}],
      [3,       'Warning',  {v: 3, f: 'Warning'}],
      [4,       'Message',  {v: 4, f: 'Message'}]
    ]);

    var options = {
      allowHtml: true,
      cssClassNames: {
        tableCell: 'googleTableCell'
      },
      sort: 'event',
      sortAscending: true,
      sortColumn: 0
    };

    var chart = new google.visualization.Table(document.getElementById('chart_div_table'));

    google.visualization.events.addListener(chart, 'sort', function (sender) {
      var sortColumn;

      // custom sort data
      switch (sender.column) {
        case 1:
          sortColumn = 0;
          break;

        default:
          sortColumn = sender.column;
      }
      data.sort([{column: sortColumn, desc: !sender.ascending}]);

      // display normal column sort arrow
      options.sortAscending = sender.ascending;
      options.sortColumn = sender.column;

      chart.draw(data, options);
    });

    chart.draw(data, options);
  },
  packages: ['table']
});

.googleTableCell {
  text-align: left !important;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_table"></div>