web-dev-qa-db-ja.com

グーグルチャートテーブルの列を非表示にする方法

Google Charts Table があり、いくつかの列と行が表示されます。たとえば、4つの列（それぞれA、B、C、D）があるとします。列Cの値をロードできますが、列が表示されないように非表示にする方法はありますか？

前もって感謝します！

javascripthtmlgoogle-visualization
15
user818700

DataTableを描画する代わりに、元のデータをフィルタリングする中間のDataViewオブジェクトを作成する必要があります。このようなもの：

//dataResponse is your Datatable with A,B,C,D columns        
var view = new google.visualization.DataView(dataResponse);
view.setColumns([0,1,3]); //here you set the columns you want to display

//Visualization Go draw!
visualizationPlot.draw(view, options);

SetColumnsの代わりにhideColumnsメソッドの方が良いかもしれません。自分で選択してください。

乾杯

33
Alex

グラフの代わりにChartWrapperを使用する別の方法を次に示します。

var opts = {
    "containerId": "chart_div",
    "dataTable": datatable,
    "chartType": "Table",
    "options": {"title": "Now you see the columns, now you don't!"}
}
var chartwrapper = new google.visualization.ChartWrapper(opts);

// set the columns to show
chartwrapper.setView({'columns': [0, 1, 4, 5]});    
chartwrapper.draw();

ChartWrapperを使用すると、非表示の列を変更したり、すべての列を表示したりする関数を簡単に追加できます。すべての列を表示するには、'columns'の値としてnullを渡します。たとえば、jQueryを使用すると、

$('button').click(function() {
    // use your preferred method to get an array of column indexes or null
    var columns = eval($(this).val());

    chartwrapper.setView({'columns': columns});    
    chartwrapper.draw();
});

あなたのhtmlでは、

<button value="[0, 1, 3]" >Hide columns</button>
<button value="null">Expand All</button>

（注：簡潔にするためにevalを使用します。コードに適したものを使用してください。それは重要ではありません。）

2
broccoli2000

これはCSSで行うことができます。

「#table_div」は、テーブルがラップされているdivです。同じページに複数のテーブルがあるため、これを使用します。

#table_div .google-visualization-table table.google-visualization-table-table 
   td:nth-child(1),th:nth-child(1){
   display:none;
}

グラフの行にもイベントハンドラーがあり、非表示の列からデータを取得できます。

1
Jason Allshorn
var view = new google.visualization.DataView(dataTable); //datatable contains col and rows
view.setColumns([0,1,3,4]); //only show these column
chart.draw(view, options); //pass the view to draw chat
1
B.Nishan

コントロールラッパーで特定の列の値を使用したいが、その列をGoogle Chartsに表示したくない場合は、次のようにします。

1）すべての列をGoogleグラフのデータテーブルに追加します。
2）chartWrapperのoptionsに次のものを追加します。

   // Set chart options
    optionsUser = {
        "series": {
            0: {
                color: "white",
                visibleInLegend: false
            }
        }
    };

3）上記の一連のコードで、0は折れ線グラフの最初の線を意味します。そのため、色が白に設定され、凡例の列名も非表示になります。

4）この方法は、列を非表示にする適切な方法ではありません。DataViewの使用をお勧めします。グラフにコントロールを追加するためにデータテーブルのデータを使用したいが、グラフにその列を表示したくない場合は、これが方法です。

0
Mohit Satish Pawar