0

サーバー側のデータ入力 (Json は PHP で作成され、datatable に戻ります) を使用して Google Visualization テーブルを作成しました。このテーブルに検索フィルターを追加するにはどうすればよいですか? ビジュライゼーション プレイグラウンドでサンプル コードを見てき ました。Control Wrapper と Chart Wrapper の使用を示しています。このコントロール ラッパーを DataTable (PHP から返された Json データ) に適用するにはどうすればよいですか?

function drawmsgtable(users)
    {
        var msgdata = $.ajax({
            url: "http://mysite/phpscripts/msgtable.php?users="+users+"",
            dataType:"json",
            async: false
        }).responseText;
        var messagedatatable = new google.visualization.DataTable(msgdata);

        var options={'backgroundColor': 'transparent', 'width': 'auto'};
        $('#table_div').empty();
        var msgTable = new google.visualization.Table(document.getElementById('table_div'));
        msgTable.draw(messagedatatable, options);
    }
4

1 に答える 1

1

まず、「コントロール」パッケージをロードする必要があります

google.load('visualization', '1', {packages: ['controls']});

次に、Table オブジェクトを ChartWrapper オブジェクトに変換し、Dashboard オブジェクトと ControlWrapper オブジェクト (およびそれらを保持するための HTML div) を追加する必要があります。Dashboard div には、コントロール div とテーブル div の両方を含める必要がありますが、必ずしもそうだ）。コントロールをダッシュ​​ボードのテーブルにバインドし、ダッシュボードを描画します

function drawmsgtable(users) {
    var msgdata = $.ajax({
        url: "http://mysite/phpscripts/msgtable.php?users=" + users + "",
        dataType: "json",
        async: false
    }).responseText;
    var messagedatatable = new google.visualization.DataTable(msgdata);

    var options = {
        backgroundColor: 'transparent',
        width: 'auto'
    };

    $('#table_div').empty();

    var dashboard = new google.visualization.Dashboard(document.getElementById('dash'));

    var msgTable = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div',
        options: options
    });

    var control = new google.visualization.ControlWrapper({
        chartType: 'StringFilter',
        containerId: 'table_div',
        options: {
             filterColumnIndex: 0
        }
    });

    dashboard.bind([control], [msgTable]);
    dashboard.draw(messagedatatable);
}​

HTML の例:

<div id="dash">
    <div id="control_div"></div>
    <div id="table_div"></div>
</div>​​​​​​​​​​​​​

複数の列でフィルター処理できるようにする場合は、フィルター処理する列ごとに追加のコントロールが必要です。

于 2012-08-25T06:58:53.623 に答える