Googleビジュアライゼーションテーブルの列にカスタム並べ替えを追加する

Question

データベースからのデータを含むGoogle視覚化テーブルを正常に完成しました。ここでは、1つの列に対してのみカスタムソートを追加する必要があります。例インスタンスのレベルを表示するために、ステータスとして列があります。これには、ok、criticalなどのいくつかの制限があります。現在の並べ替え順序を使用すると、上に「OK」の行が表示されます。その代わりに、まず「重要な」行を表示する必要があります。これを行うために、私は '重要'のためのレベル1、 'ok'など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); 
      } 


       }); 

ステータス欄にソート順（レベルでソート）を追加する方法は？

ご協力いただければ幸いです。ここ

Answer 1

表チャートを並べ替え、カスタムのためのカップルのオプションが

最初 ...です、あなたは両方の列から値を結合するために、オブジェクトの表記法を使用することができます...
はとして（v:）の値を設定しましたあなたも追加するDataViewを使用することができ、レベルやステータスとしてフォーマットされた値（f:）
{v: 1, f: 'Critical'}

は、デフォルトでは、表チャートは
をソートする値を使用します計算から列

ここ

唯一の問題それは価値があるものだから、列の型は、'number'でなければなりません...
すでにカスタムを持っている場合、チャートは右、その列

のための細胞を整列させます書式設定ではなく、大した、あなたは

次は、カスタムソートsortイベントを使用するために、例のように、修正するためにcssを使用することができます...これはチャートのカスタムソートがあなたにも以下の二つの設定オプション

を提供する必要があります使用されていると

「を命じたとして、」dataを表示するように伝えます>sort: 'event'

-

は、設定オプションを設定します

sortAscending: true, 
    sortColumn: 0 

これは、列の見出し（上向き/下向き矢印）に並べ替えの矢印を配置する場所を示します。

あなたは0と1列のソートをオーバーライドする場合

ので、
はまだ設定オプションを設定する必要があります - >sortColumn: 1

コラム1（状況）のソートが列で上書きされ、作業スニペットを次のように表示

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>

上記のように0（レベル）
カラム2（ソート）オブジェクト表記法を使用し