1

我创建了一个基于小提琴示例的谷歌可视化仪表板来回答这个问题，

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

它的数据来自这个融合表。我想要一个类别过滤器控件，例如选择日期列。条件是我想选择MMMM格式的格式化数据。即，如图所示。以下。

在此处输入图像描述

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

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

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

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

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

4

2 回答 2

2

也许这是一个非常糟糕的答案，或者根本是错误的：但我真的不认为这是可能的。您想根据月份名称过滤日期，但仍要查看日期？但是，您可以使用 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函数或类似的东西。也许月份列可以转换为a { role: "tooltip" }，没有尝试过。

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

于 2013-10-03T14:28:47.303 回答
0

使用您发布的日期格式化您的日期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
        }
    }
});
于 2013-10-03T13:07:07.433 回答