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时，值会按照数据中的显示进行排序。

为了使月份名称按时间顺序排列（1月，2月，3月等等），您需要使用'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>