Google Chart: как Сортировать по категориям фильтр с хронологическим порядком (по месяцам)?

У меня есть фильтр категорий, который заполняет название месяца в алфавитном порядке. Я хотел бы показать месяцы в хронологическом порядке (январь, февраль, март и т. д.) а также я хотел бы установить имя текущего месяца по умолчанию в выпадающем списке. Я не могу настроить SQL по полю ORDER BY, вместо этого я хотел бы сделать это из фильтра категорий.

Код: 

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
                }
        }
});

Снимок Фильтра Категорий

1 3
google-visualization

1 ответ:

При использовании 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>
2