cách ẩn cột trong bảng xếp hạng google

Question

Tôi có một số Google Charts Table hiển thị một vài cột và hàng. Ví dụ, chúng ta có 4 cột (A, B, C, D tương ứng). Làm cách nào để tôi vẫn có thể tải các giá trị của cột C, nhưng chỉ cần ẩn cột để nó không được hiển thị?

Cảm ơn trước!

Answer 1

Thay vì vẽ DataTable, bạn phải tạo đối tượng DataView ở giữa nơi bạn lọc dữ liệu gốc. Một cái gì đó như thế này:

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

Phương pháp hideColumns có thể tốt hơn thay vì setColumns, tự chọn!

Chúc mừng

Answer 2

Bạn có thể làm điều này bằng CSS.

"#table_div" là div mà bảng của tôi được gói. Tôi sử dụng vì có nhiều bảng trên cùng một trang.

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

Tôi cũng có trình xử lý sự kiện trên các hàng của biểu đồ và vẫn có thể lấy dữ liệu từ cột ẩn.

Answer 3

Dưới đây là một thay thế bằng cách sử dụng biểu đồ thay vì biểu đồ.

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

Nếu bạn sử dụng ChartWrapper, bạn có thể dễ dàng thêm chức năng để thay đổi cột ẩn hoặc hiển thị tất cả các cột. Để hiển thị tất cả các cột, hãy vượt qua null làm giá trị của 'columns'. Ví dụ, sử dụng 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(); 
}); 

Trong html của bạn,

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

(Lưu ý:. eval sử dụng cho conciseness Sử dụng những gì phù hợp với mã của bạn Đó là bên cạnh điểm..)

Answer 4

Nếu bạn muốn sử dụng giá trị cột cụ thể trong trình bao bọc kiểm soát nhưng không muốn hiển thị cột đó trong Biểu đồ của Google, sau đó thực hiện những việc sau.

1) Thêm tất cả cột vào bảng dữ liệu biểu đồ google của bạn.
2) Thêm các mục sau vào tùy chọn của biểu đồWrapper.

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

3) Trong chuỗi mã trên, 0 có nghĩa là dòng đầu tiên trong biểu đồ dạng đường của bạn. Vì vậy, nó sẽ thiết lập màu trắng và cũng ẩn tên cột trong Legends.

4) Cách này không phải là cách thích hợp để ẩn cột, Sử dụng DataView được khuyến nghị. Bất cứ khi nào bạn muốn sử dụng dữ liệu trong bảng dữ liệu để thêm điều khiển vào biểu đồ của bạn nhưng không muốn hiển thị cột đó trong biểu đồ, đây là cách.