Aplicando CSS a la tabla de visualización de Google

Question

Sep 29, 2013, 06:16 PM

css google-visualization css-tables wordpress

Aplicando CSS a la tabla de visualización de Google

He creado una tabla en la visualización de Google que utiliza el siguiente código:

<html>
  <head>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
         var cssClassNames = {
    'headerRow': 'headerRow',
    'tableRow': 'tableRow'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username');
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

Deseo poder cambiar el formato de la fila del encabezado y las filas de la tabla utilizando CSS, aunque no puedo averiguar cómo hacerlo. He leído a través delOpciones de configuración pero ser un recién llegado a la codificación, esto no ha ayudado y necesita que se lo explique claramente paso a paso.

Específicamente, ¿qué agrego al código anterior para decirle al gráfico que use mi CSS personalizado? ¿Y qué pondría en mi principal? Hoja de estilo CSS. No estoy seguro si sería (para el encabezado)#headerRow { } o.headerRow { }.

Para su información, esto se está insertando a través de Wordpress a través de un campo personalizado si eso marca alguna diferencia.

Si no me he aclarado lo suficiente en la pregunta, por favor haga el seguimiento. Aclamaciones.

ACTUALIZACIÓN: @asgallant - todavía no funciona cuando se cambia a headerCell y tableCell.

Mi código actual es: HTML / Javascript:

<html>
  <head>
      <script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table']});
      google.setOnLoadCallback(drawTable);
      function drawTable() {
         var cssClassNames = {
    headerCell: 'headerCell',
    tableCell: 'tableCell'};
var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true};
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Username',{style: 'background-color:red;'});
        data.addColumn('number', 'Won');
        data.addColumn('number', 'Lost');
        data.addColumn('number', 'Win/Loss Ratio');
        data.addColumn('number', 'Goals For');
        data.addColumn('number', 'Goals Against');
        data.addColumn('number', 'Score');
        data.addRows([
          ['Mike', 22, 13, 0.63, 65, 30, 600],
          ['Andy', 25, 10, 0.71, 60, 18, 630],
          ['Steve', 5, 20, 0.20, 10, 50, 475],
          ['Chris', 40, 10, 0.80, 120, 20, 670],
          ['Jake', 15, 15, 0.50, 70, 50, 525],
        ]);
        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});
      }
    </script>
  </head>

  <body>
    <div id='table_div'></div>
  </body>
</html>

CSS:

#table_div table {
    color: #000;
    margin-top: 10px;
}

.headerRow {
    color: #000;
}

El table_div me permite editar la tabla como un todo, por lo que el código CSS actual tiene un efecto, pero cuando agrego el color de fondo: # ff0000; por ejemplo, no tiene efecto. Lo mismo con .headerRow. El fondo está siendo tomado dehttps://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css y no quiere ser anulado.

¿Alguna idea de por qué esto podría ser?

Si fuera absolutamente necesario, me encantaría deshabilitar el CSS de Google por completo y hacerlo puramente desde mi propia hoja de CSS.