charts - 谷歌图表 : How do I sort by category filter with chronological order (by month)?

Question

我有一个类别过滤器，可以按字母顺序填充月份名称。我想按时间顺序显示月份(一月、二月、三月等)，并且我想在下拉列表中将当前月份名称设置为默认值。我无法通过 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>