Google Chart：カテゴリーフィルタを日付順（月別）でソートするにはどうすればよいですか？

Question

月名にアルファベット順の値を入力するカテゴリフィルタがあります。月を時系列順（1月、2月、3月など）に表示したいのですが、現在の月名をデフォルトとしてドロップダウンに設定したいと思います。私はORDER BYフィールドでSQLを微調整することはできません、代わりに、私はカテゴリフィルタからそれをやりたいです。

コード：彼らはデータに現れるよう

var filterFrequencyData = new google.visualization.ControlWrapper(
{ 
    'controlType': 'CategoryFilter', 
    'containerId': 'filterFrequencyDataHtml', 
    'options': 
     { 
      'filterColumnIndex': '5', 
      'ui': 
       { 
        'label': '', 
        'labelSeparator': ':', 
        'labelStacking': 'vertical', 
        'allowTyping': false, 
        'allowNone': false, 
        'allowMultiple': false, 
        'sortValues': false 
       } 
     } 
}); 

Answer 1

CategoryFilterにsortValues: falseを使用して、値がソートされます。あなたは'string'以外の列の型を使用すると、その列をソートし、'number'または'date'する必要が年代順（1月、2月、3月、等...）、でソートする月名を取得するために

、例えば。

セルのフォーマットされた値を月名に設定します。セルは既に値がある場合にも、setFormattedValueメソッドを使用することができます

{v: 0, f: 'January'} 

または

{v: new Date(2016, 0, 1), f: 'January'} 

：たとえば、代わりに一度

data.setFormattedValue(0, 0, 'January'); 

を、テーブルを並べ替えることができます'number'または'date'：

data.sort({column: 0}); 

'date'列が月の名前をソートするために使用され、次の作業スニペットを参照してください：

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable({ 
 
     cols: [{ 
 
     label: 'Month', 
 
     type: 'date' 
 
     }] 
 
    }); 
 

 
    // load months in reverse 
 
    var formatDate = new google.visualization.DateFormat({pattern: 'MMMM'}); 
 
    var today = new Date(); 
 
    var monthCount = 12; 
 
    var selectedRow; 
 
    var rowIndex; 
 
    while (monthCount--) { 
 
     // get row values 
 
     var monthDate = new Date(today.getFullYear(), monthCount, 1); 
 
     var monthName = formatDate.formatValue(monthDate); 
 

 
     // use object notation when setting value 
 
     rowIndex = data.addRow([{ 
 
     // value 
 
     v: monthDate, 
 

 
     // formatted value 
 
     f: monthName 
 
     }]); 
 

 
     // set selected row 
 
     if (monthName === formatDate.formatValue(today)) { 
 
     selectedRow = rowIndex; 
 
     } 
 
    } 
 

 
    // sort data 
 
    data.sort({column: 0}); 
 

 
    var dash = new google.visualization.Dashboard(document.getElementById('dashboard')); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
     controlType: 'CategoryFilter', 
 
     containerId: 'control_div', 
 
     options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
      allowMultiple: false, 
 
      allowNone: false, 
 
      allowTyping: false, 
 
      label: '', 
 
      labelStacking: 'vertical', 
 
      sortValues: false 
 
     }, 
 
     // use month name 
 
     useFormattedValue: true 
 
     }, 
 
     // state needs formatted value 
 
     state: { 
 
     selectedValues: [data.getFormattedValue(selectedRow, 0)] 
 
     } 
 
    }); 
 

 
    // or set state here -- just need month name 
 
    control.setState({selectedValues: [formatDate.formatValue(today)]}); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'Table', 
 
     containerId: 'chart_div', 
 
     options:{ 
 
     allowHtml: true 
 
     } 
 
    }); 
 

 
    dash.bind(control, chart); 
 
    dash.draw(data); 
 
    }, 
 
    packages: ['controls', 'corechart', 'table'] 
 
});

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