Google चार्ट तालिका में कॉलम को कैसे छिपाना है

Question

मुझे Google Charts Table मिल गया है जो कुछ कॉलम और पंक्तियां प्रदर्शित करता है। उदाहरण के लिए कहें कि हमारे पास क्रमशः 4 कॉलम (ए, बी, सी, डी) हैं। मैं अभी भी कॉलम सी के मानों को लोड करने में सक्षम कैसे हो सकता हूं, लेकिन कॉलम कॉलम को छुपाएं ताकि यह प्रदर्शित न हो?

अग्रिम धन्यवाद!

Answer 1

डेटाटेबल को चित्रित करने के बजाय, आपको डेटाव्यू ऑब्जेक्ट के बीच एक बनाना होगा जहां आप मूल डेटा फ़िल्टर करते हैं। इस तरह कुछ:

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

छुपा कॉलम विधि सेट कॉलम के बजाय शायद बेहतर है, स्वयं का चयन करें!

चीयर्स

Answer 2

आप इसे सीएसएस के साथ कर सकते हैं।

"#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

चार्ट के बजाय चार्टवापर का उपयोग करके यहां एक विकल्प है।

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

यदि आप चार्टवापर का उपयोग करते हैं, तो आप छुपे हुए कॉलम को बदलने या सभी कॉलम दिखाने के लिए आसानी से एक फ़ंक्शन जोड़ सकते हैं। सभी कॉलम दिखाने के लिए, '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 संक्षिप्तता के लिए इस्तेमाल का उपयोग करें क्या करें जो आपके कोड यह बिंदु के बगल में है।।)

Answer 4

आप तो नियंत्रण रैपर में विशेष कॉलम मान का उपयोग करना चाहते हैं लेकिन Google चार्ट में उस कॉलम को दिखाना नहीं चाहते हैं तो निम्न चीज़ें करें।

1) अपने Google चार्ट डेटा तालिका में सभी कॉलम जोड़ें।
2) अपने चार्टवापर के विकल्प पर निम्न चीज़ें जोड़ें।

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

3) उपरोक्त कोड श्रृंखला में, 0 अपनी लाइन चार्ट में पहली पंक्ति का मतलब है। तो यह रंग को सफेद रंग में सेट करेगा और किंवदंतियों में कॉलम नाम भी छुपाएगा।

4) इस तरह कॉलम छुपाने का उचित तरीका नहीं है, डेटाव्यू का उपयोग करने की अनुशंसा की जाती है। जब भी आप अपने चार्ट में नियंत्रण जोड़ने के लिए डेटा तालिका में डेटा का उपयोग करना चाहते हैं लेकिन चार्ट में उस कॉलम को दिखाना नहीं चाहते हैं तो यह वही तरीका है।