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>