Googleのグラフの表の列を非表示にする方法

Question

私はGoogle Charts Tableにいくつかの列と行を表示しています。たとえば、4つの列（それぞれA、B、C、D）があるとします。どうすればC列の値を読み込むことができますか？ただ列が表示されないように非表示にしますか？

ありがとうございます！

Answer 1

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

hideColumnsメソッドは、おそらくsetColumnsではなく、自分で選択してください。

乾杯

Answer 2

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

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

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

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

Answer 3

グラフの代わりに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を使用している場合は、非表示の列を変更する機能や、すべての列を表示する機能を簡単に追加できます。すべての列を表示するには、nullを'columns'の値として渡します。例えば、jQueryの、あなたのHTML内

$('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(); 
}); 

、

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

（注：簡潔にするために使用さevalをあなたのコードに合ったものを使用することがポイントの横にあります。。。）を使用して

Answer 4

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

1）すべての列をGoogleチャットのデータテーブルに追加します。
2）chartWrapperのオプションに以下を追加してください。

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

3）上記のコードシリーズでは、0は折れ線グラフの最初の行を意味します。したがって、色を白に設定し、凡例で列名を非表示にします。

4）この方法は列を非表示にする適切な方法ではありません。DataViewを使用することをお勧めします。データテーブル内のデータをチャートに追加するためにデータを使用したいが、その列をチャートに表示したくない場合はいつでもそうです。