Как предотвратить загрузку таблицы google диаграммы css

Каждый раз, когда я использую таблицу Google Chart, загрузчик google загружает http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css который всегда и почти убивает мой bootstrap css, и я очень раздражаю в 2AM.:)
Примечание. Я не могу изменить файл table.css.

Знаете ли вы какой-либо метод, который может помешать загрузке файла CSS?

Спасибо за помощь.

PS: Да, я пробовал с JS, но таблица перекомпилируется на странице переключения, поэтому я должен каждый раз заменять имя класса table на странице.

Ответы

Ответ 1

Как видно из Документов API таблицы диаграмм Google, вы можете переопределить классы CSS, используемые для установки параметра cssClassNames:

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

Проверьте документ с помощью приведенной выше ссылки, чтобы увидеть полное описание каждого свойства, поддерживаемого cssClassNames.

Очень просто, основываясь на Google Tableground Table, если вы переопределите все свойства, таблица будет (почти) свободна от CSS CSS.

Вы можете попробовать, скопировав следующий код на примере игровой площадки:

// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
  cssClassNames: {
    headerRow: 'someclass',
    tableRow: 'someclass',
    oddTableRow: 'someclass',
    selectedTableRow: 'someclass',
    hoverTableRow: 'someclass',
    headerCell: 'someclass',
    tableCell: 'someclass',
    rowNumberCell: 'someclass'
  }
});

Это должно позволить только Twitter Bootstrap CSS.

Загруженный CSS все еще меняет несколько вещей, но, кажется, уходит, если вы просто удалите класс google-visualization-table-table. Вы должны сделать это после каждого вызова .draw().

var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);

Обновить. Если вы используете параметр страницы, вы можете использовать этот фрагмент для удаления класса при подкачке:

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    page: 'enable',
    pageSize: 2,
    cssClassNames: {
      /* ... */
    }
  });

google.visualization.events.addListener(visualization , 'page',
   function(event) {
       var className = 'google-visualization-table-table';
       $('.'+className).removeClass(className);
   });

Не забудьте также вызвать .removeClass() при инициализации (вы должны сделать функцию, например: http://pastebin.com/zgJ7uftZ)

Ответ 2

Дайте вашему классу body класс. Затем примените свой CSS, используя этот класс.

<body class="my">..</body>

.my .google-visualization-table-table { /* blah */ }

Ответ 3

Я вижу только две возможности. Либо измените все ваши CSS-селектора на что-то с более высокой спецификой, либо используйте Javascript для удаления таблиц стилей, которые вы не хотите загружать.

Изменение CSS-селекторов не проблема, если вы используете CSS-препроцессор. Вы могли бы просто использовать его только один раз, чтобы изменить все селекторы.

С Javascript вам понадобится точка, в которой вы можете повесить прослушиватель событий, который удаляет таблицу стилей. Эта точка должна быть сразу после добавления таблицы стилей.

Если у вас нет такой точки, вам придется перезаписать document.createElement(что является плохой практикой вообще).

Это сработало для меня. Из-за недостатка IE < 9s addEventListener и indexOf для массивов он там не работает. Но после того, как вы исправите это, он должен работать и там:

(function () {
    var createElement = document.createElement,
        stylesheetBlacklist = [
            'http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css'
        ];
    document.createElement = function (tagname) {
        var e = createElement.apply(this, arguments);
        if (tagname === 'link') {
            if (e.__defineSetter__) {
                var setAttr = e.setAttribute;
                e.__defineSetter__('src', function (val) {
                    e.setAttribute('src', val);
                });
                e.setAttribute = function (attrName, attrVal) {
                    if (attrName !== 'src' || stylesheetBlacklist.indexOf(attrVal) === -1) {
                        setAttr.call(e, attrName, attrVal);
                    }
                }
            } else {
                e.addEventListener('load', function () {
                    if (stylesheetBlacklist.indexOf(this.src) > -1) {
                        this.parentNode.removeChild(this);
                    }
                });
            }
        }
        return e;
    }
}());

Конечно, это не будет препятствовать тому, чтобы таблицы стилей были @imported внутри элемента стиля. Так что это действительно грязный хак, чем решение...

Жаль, что API Googles предлагает вариант "nocss", но не поддерживает его в модуле визуализации.

EDIT: если браузер поддерживает defineSetter, он больше не загружает таблицу стилей.

Ответ 4

Моя идея по-прежнему похожа на некоторые другие здесь, чтобы переопределить Google через более конкретный селектор. Я думаю, что с помощью бутстрапа, возможно, самый простой способ сделать это примерно так:

Настройте `id` в тэге html.

HTML

<html id="myHTML">All your html goes here</html>

Настройте загрузчик для загрузки всех его селекторов под `id`.

МЕНЬШЕ

#myHTML {
   font-size: 100%;
   @import: "yourpath/bootstrap.less";
   @import: "yourpath/anyOtherBootstrapFilesYouMightLoad.less";
   etc...
}

Обратите внимание, что font-size: 100% - это потому, что bootstrap.less имеет html { font-size: 100% }, который вы хотите сохранить эту функциональность, но вы потеряете его, если не реплицируете то, что находится в вызове bootstrap для html. Подробнее см. Вывод CSS ниже.

Выход

CSS (краткий вывод)

#myHTML {
    font-size: 100%;
}

#myHTML article, 
#myHTML aside, 
#myHTML details, 
#myHTML figcaption, 
#myHTML figure, 
#myHTML footer, 
#myHTML header, 
#myHTML hgroup, 
#myHTML nav, 
#myHTML section {
    display: block;
}

#myHTML html { 
/* this is from the base html call in bootstrap, but will never 
   select anything as it is basically like writing "html html" 
   for a selector, which is why we added the font-size to your 
   LESS code above 
*/
    font-size: 100%;
}

#myHTML .btn {
    etc...
}

Посредством этого вы можете увидеть, как все прямые классы, такие как .btn, заканчиваются тем, что к ним добавлен id, который находится на вашем теге <html>. Это дает селектору более высокую специфичность, чем google .google-visualization-table-table *, поскольку id выше приоритета *.

Ответ 5

Что делать, если вы просто получаете копию js того, что загружает google api, и размещайте ее на своем сервере, как в приведенном ниже примере table.js, и комментируйте вызов google api.

// google.load('visualization', '1', {packages:['table']});

Внутри найдите строку '/table/table.css' и замените ее на '/table/../core/tooltip.css'

Таким образом, table.css загружается никогда.

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript' src='table.js'></script>
  </head>
  <body>
    <div id='table_div'></div>
    <script type='text/javascript'>
      //      google.load('visualization', '1', {packages:['table']});
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});

    </script>
  </body>
</html>

Я не уверен, что это что-то нарушает, и это очень хакерское решение. Очевидно, что для этого есть последствия.

Ответ 6

Это должно решить вашу проблему, я верю: Ссылка

Взято из ссылки:

Добавьте префикс к именам классов css

 var cssClassNames = {
     'tableCell': 'myTable myBorder'};

а затем измените свои css-замедление следующим образом:

.myTable.myBorder {
 border: 1px solid #6699FF;
 font-size:11px;
 color:#226180;
 padding:135px;
 margin:135px;
 }

Ответ 7

Легко, поскольку у вас установлен jQuery:

jQuery(document).ready(function ($) {
  $('*[class*=google-visualization]').attr('class', function() {
    return $(this).attr('class').replace('google', 'yahoo')
  })
});