Question

我已成功完成了一个包含来自数据库的数据的Google可视化表。现在我需要为一列添加自定义排序。例如，我有一个列作为状态来显示实例的级别。它有几个限制，例如ok，critical等。当我使用当前的排序顺序时，它会显示＆＃39; ok＆＃39;在上面。而不是我需要显示＆＃39; critical＆＃39;先行。为了完成这项工作，我有另一个专栏作为关键＆＃39;等级1，等等＆＃39;确定＆＃39;我需要做的是当用户试图排序＆＃39; Status＆＃39;列，该列应根据＆＃39;级别排序。

     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);
          }


              });

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

任何帮助将不胜感激。

Answer 1

以下是一些自定义排序表格图表的选项...

首先，您可以使用对象表示法来合并两列中的值...
将值（v:）设置为级别，将格式化值（f:）设置为状态
{v: 1, f: 'Critical'}

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

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

如果您已经拥有自定义格式，那么您可以使用css进行更正，例如

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

设置配置选项 - ＆gt; sort: 'event'

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

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

  sortAscending: true,
  sortColumn: 0

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

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

请参阅以下工作代码段

第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>

在Google可视化表格列

1 个答案: