Styling Google Charts Table

Je suis en train d'ajouter un style CSS à un Google Table à Cartes. J'ai essayé ceci:

https://developers.google.com/chart/interactive/docs/gallery/table#customproperties

sur la première cellule (Mike) mais il ne fonctionne pas. J'ai mis allowHtml de vrai dans les options de la variable. Comment puis-je changer le fond, couleur du texte, etc. des cellules individuelles? Merci.

<script type="text/javascript">
        google.load('visualization', '1', {packages:['table']});
        google.setOnLoadCallback(drawTable);
        function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Employee Name');
            data.addColumn('date', 'Start Date');
            data.addRows(3);
            data.setCell(0, 0, 'Mike', {style: 'background-color:red;'});
            data.setCell(0, 1, new Date(2008, 1, 28));
            data.setCell(1, 0, 'Bob');
            data.setCell(1, 1, new Date(2007, 5, 1));
            data.setCell(2, 0, 'Alice');
            data.setCell(2, 1, new Date(2006, 7, 16));

            var options = {
                allowHtml: true
            };

            //Create a formatter.
            //This example uses object literal notation to define the options.
            var formatter = new google.visualization.DateFormat({formatType: 'long'});

            //Reformat our data.
            formatter.format(data, 1);

            //Draw our data
            var table = new google.visualization.Table(document.getElementById('dateformat_div'));
            table.draw(data, options);
        }
    </script>

source d'informationauteur carlosgg

  1. 11

    Comment puis-je changer le fond, couleur du texte, etc. des cellules individuelles? Merci.

    Par @Bondye du commentaire, la réponse se trouve dans le guide du développeur.

    https://developers.google.com/chart/interactive/docs/examples#custom_table_example

    Définir des règles de style qui correspondent à vos critères:

    <style>
.orange-background {
   background-color: orange;
  }

 .orchid-background {
  background-color: orchid;
 }

.beige-background {
 background-color: beige;
  }
</style>

    De les appliquer à la table quand élaboré.

    var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': '',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'};

var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

var data = new google.visualization.DataTable();

//... add data here ...

var table = new google.visualization.Table(container);
table.draw(data, options);