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'，例如。

然後將單元格的格式化值設置爲月份名稱。例如：

{v: 0, f: 'January'} 

或

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

您還可以使用setFormattedValue方法，如果小區已經有值：

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>