comment masquer la colonne dans la table des graphiques google

J'ai un Google Table À Cartes qui affiche un couple de colonnes et de lignes. Dire, par exemple, nous avons 4 colonnes(A,B,C,D, respectivement). Comment pourrais-je être en mesure de toujours charger la colonne C, les valeurs, mais juste cacher la colonne, de sorte qu'il n'est pas affiché?

Merci d'avance!

source d'informationauteur Tiwaz89

  1. 29

    Au lieu de tirer la Table de données, vous devez créer un entre-deux objet DataView où vous filtrez les données d'origine. Quelque chose comme ceci:

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

    La hideColumns méthode est peut-être mieux, au lieu de setColumns, choisissez vous-même!

    Acclamations

  2. 1

    Vous pouvez le faire avec les CSS.

    "#table_div" est le div de ma table est enveloppé dans. J'ai utilisé ce terme car il y a plusieurs tables sur la même page. 

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

    J'ai aussi un gestionnaire d'événement sur le tableau de lignes, et peut toujours récupérer les données de la colonne masquée.

  3. 1

    Voici une alternative à l'aide d'un ChartWrapper au lieu d'un tableau.

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

    Si vous utilisez un ChartWrapper, vous pouvez facilement ajouter une fonction pour modifier les colonnes cachées ou afficher toutes les colonnes. Pour afficher toutes les colonnes, passer null que la valeur de 'columns'. Par exemple, à l'aide de 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();
});

    Dans votre code html,

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

    (Note: eval utilisé pour alléger le texte. Utiliser ce qui convient à votre code. C'est à côté de la question.)

  4. 0

    Si vous souhaitez utiliser notamment la valeur de la colonne dans le contrôle wrapper, mais ne voulez pas afficher cette colonne dans Google Charts alors ne la suite des choses.

    1) Ajouter toutes les colonnes de votre google charts tableau de données.

    2) Ajouter les éléments suivants à options de votre chartWrapper.

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

    3) Dans le code ci-dessus série, 0 signifie que la première ligne de votre ligne graphique. Donc, Il faudra définir la couleur blanche et aussi de masquer le nom de la colonne dans les Légendes.

    4) de Cette façon n'est pas la bonne façon de cacher les colonnes, à l'Aide de DataView est recommandé. Chaque fois que vous voulez utiliser les données dans la table de données pour ajouter des commandes à votre graphique, mais ne voulez pas afficher cette colonne dans le tableau c'est la manière.

  5. 0
    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