google可视化类别过滤日期解析

Question

我根据this question 的回答中的小提琴示例创建了一个google visualization dashboard，

function drawTable(response) {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Sl. No.');
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Date');

    var rows = [];
    for (var i = 0; i < response.rows.length; i++) {
        rows.push([parseInt(response.rows[i][0]), response.rows[i][3], response.rows[i][4]]); 
    }
    data.addRows(rows);

    var table = new google.visualization.ChartWrapper({
        containerId: 'table_div',
        chartType: 'Table',
        options: {

        }
    });

    var control = new google.visualization.ControlWrapper({
        containerId: 'control_div',
        controlType: 'CategoryFilter',
        options: {
            filterColumnIndex: 2,
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
        }
    });

    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
    dashboard.bind([control], [table]);
    dashboard.draw(data);
}

function getData() {
    // Builds a Fusion Tables SQL query and hands the result to  dataHandler
    var queryUrlHead = 'https://www.googleapis.com/fusiontables/v1/query?sql=';
    var queryUrlTail = '&key=AIzaSyCAI2GoGWfLBvgygLKQp5suUk3RCG7r_ME';
    var tableId = '1U-snFJDhdO7jhDjKGfNUZG_P4n4UXvKFjU8F_hM';

    // write your SQL as normal, then encode it
    var query = "SELECT * FROM " + tableId;
    var queryurl = encodeURI(queryUrlHead + query + queryUrlTail);

    var jqxhr = $.get(queryurl, drawTable, "jsonp");
}
google.load('visualization', '1', {packages:['controls'], callback: getData});

及其来自fusion table 的数据。我想要一个类别过滤器控件，例如选择日期列。条件是我想选择 MMMM 格式的格式化数据。即，如图所示。下面。

我怎样才能做到这一点？？？

编辑：我尝试了以下格式化程序代码

var monthformatter = new google.visualization.DateFormat({pattern: "MMMM"});
    monthformatter.format(data, 2);

将日期格式转换为月份。但是没用。

无论如何，同样可以从spreadsheet data 实现，如this fiddle (Example 2) 所示，使用谷歌可视化查询响应。但是电子表格会因大量数据而挂起，而 google fusion table gviz 查询（即var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq=select * from fusiontableid");）只会给出前 500 行数据（参见下面的示例 3）。这就是为什么我需要执行示例 1。

• Example 1
• Example 2
• Example 3

Answer 1

也许这是一个非常糟糕的答案，或者完全是错误的：但我真的不认为这是可能的。您想根据月份名称过滤日期，但仍要查看日期？但是，您可以使用 ControlWrapper 保存月份来实现目标 - 并根据日期按月份排序 - 通过添加一个额外的字段：

data.addColumn('string', 'Month');

并像这样格式化数据：

var rows = [];
var months = ["January", "February", "March", "April", "May", "June","July", "August",      "September","October", "November", "December" ];    
for (var i = 0; i < response.rows.length; i++) {
  var month=months[new Date(response.rows[i][3]).getMonth()];
  rows.push([parseInt(response.rows[i][0]), 
             response.rows[i][1], 
             response.rows[i][3], 
             month
            ]); 
}
data.addRows(rows);

不能截图，弹出窗口每次都隐藏。

这是一个分叉的小提琴（我认为这是你的#2）-> http://jsfiddle.net/TkV7v/

如您所见，我尝试使用 DataView 隐藏额外的列

var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3]);    
view.hideColumns([3])

但这不起作用 :( 显然可视化需要过滤数据才能看到。找不到setColumnWidth 函数或类似的东西。也许月份列可以转换为{ role: "tooltip" }，没有尝试过那个。

如上所述，我不知道这个答案值多少钱。如果它没用或任何其他人破解代码，请删除它。

Answer 2

使用您发布的monthformatter 格式化您的日期，然后将控件的 `useFormattedValue' 选项设置为 true：

var monthformatter = new google.visualization.DateFormat({pattern: "MMMM"});
monthformatter.format(data, 2);

var control = new google.visualization.ControlWrapper({
    containerId: 'control_div',
    controlType: 'CategoryFilter',
    options: {
        filterColumnIndex: 2,
        useFormattedValue: true,
        ui: {
            labelStacking: 'vertical',
            allowTyping: false,
            allowMultiple: false
        }
    }
});