1

この質問に答えるフィドルの例に基づいて、 Google ビジュアライゼーション ダッシュボードを作成しました。

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 視覚化クエリ応答を使用して、スプレッドシート データから同じことを実現できます。しかし、スプレッドシートは大量のデータ セットに対してハングアップし、Google フュージョン テーブル gviz クエリ (つまり、) は最初の 500 行のデータしか提供しません (以下の例 3 を参照)。そのため、例 1 を実行する必要がありました。var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq=select * from fusiontableid");

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関数などを見つけることができませんでした。おそらく、月の列を に変換できますが{ 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 に答える