Применение CSS к таблице визуализации Google

Я создал таблицу в Google Visualization, которая использует следующий код:

<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>​

Я хотел бы иметь возможность изменить форматирование строки заголовка и строки таблицы с помощью CSS, хотя я не могу понять, как это сделать. Я прочитал Параметры конфигурации, но, будучи относительным новичком в кодировании, это не помогло и нуждается в четком объяснении шаг за шагом.

В частности, что я добавлю к приведенному выше коду, чтобы указать диаграмме использовать мой пользовательский CSS. И что бы я положил в свой основной? Таблица стилей CSS. Не уверен, будет ли это (для заголовка) #headerRow { } или же .headerRow { },

Для вашей информации это вставляется через Wordpress через настраиваемое поле, если это имеет какое-либо значение.

Если я не достаточно ясно выразился в этом вопросе, пожалуйста, продолжайте. Приветствия.

ОБНОВЛЕНИЕ: @asgallant - все еще не работает при переходе к headerCell и tableCell.

Мой текущий код: 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;
}

Table_div позволяет мне редактировать таблицу целиком, так что текущий код CSS оказывает влияние, но когда я добавляю background-color: #ff0000; например, это не имеет никакого эффекта. То же самое с.headerRow . Фон берется из https://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css и не хочет быть переопределенным.

Есть идеи, почему это может быть?

Если бы это было абсолютно необходимо, я был бы рад полностью отключить Google CSS и сделать это исключительно из своего собственного листа CSS.

Источник

4 ответа

После того, как вы создали CSS, я обнаружил, что это ключ к тому, чтобы заставить его работать:

var cssClasses = {headerRow: 'tblHeaderClass',hoverTableRow: 'tblHighlightClass'};
var options = {showRowNumber: false, allowHTML: true, 'cssClassNames':cssClasses};

table.draw(data,options);

вынудите директиву cssClassNames к строке с "галочками" и обязательно используйте объявленный вами объект, чтобы определить классы CSS, которые будут использоваться для имен элементов таблицы.

Источник

Вы пробовали! Важные в конце вашего свойства CSS?

Пример CSS:

.headerRow {
    color: #000!important;
}

Свойство! Важный всегда будет применяться независимо от того, где это правило появляется в CSS.

Источник

Я также новичок в Google Charts, но изучил так много вариантов, что у меня есть довольно хорошее понимание того, как стилизовать ваш стол.

См. Эту ссылку для правильного примера Google: https://developers.google.com/chart/interactive/docs/examples?hl=fr

В конечном итоге вы назначаете имя класса строке таблицы. После вы можете назначить любой код CSS, который вы хотите. Есть альтернатива, где вы можете использовать встроенный CSS, но я не рекомендую его.

Встроенный стиль выглядит следующим образом

[{v: 'cell string', p: {'style': 'font-weight: bold;'}}],

Вы также можете добавить свое форматирование или что-нибудь еще.

Если вам нужны дальнейшие разъяснения, не стесняйтесь отвечать в моей теме.

Источник

Пройдите быстрый пик на https://developers.google.com/chart/interactive/docs/gallery/table для получения дополнительной информации, но вы сможете ссылаться в своей собственной таблице стилей в теге head, а затем ссылаться на класс в JS. Единственное, в чем я не уверен, так это в том, можете ли вы создавать собственные CSS-файлы с помощью Wordpress, но это была бы общая идея:

HTML:

<link href="css/myCustomCss.css" rel="stylesheet">

Javascript:

var cssClassNames = {headerRow: 'myAwesomeClass'};

CSS:

.myAwesomeClass {
   font-size: 24px;
}
Источник
Другие вопросы по тегам