如何防止加载google chart表css [英] How to prevent loading google charts table css

问题描述

每次使用Google Charts表时，Google加载程序都会加载 http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css
这总是和几乎杀了我的bootstrap css，我在上午2点很讨厌。 :)

注意：我不能修改table.css文件。

Every time I use Google Charts' Table the google loader loads a http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css which always and almost kills my bootstrap css, and i't pretty annoying at 2AM. :)
Note: I can't modify the table.css file.

可以阻止加载CSS文件？

Do you know any method that can prevent the loading of the CSS file?

感谢您的帮助。

PS： ve尝试与JS，但表重新编译切换页面，所以我应该替换表的每一次分页。

PS: Yep, I've tried with JS, but the table recompiles on switching page, so i should replace the table's classname every time on paged.

推荐答案

如 Google图表表中所示API文档，您可以通过设置 cssClassNames 选项覆盖所使用的CSS类：

As seen in the Google Chart Table API Docs, you can override the CSS classes used by setting the cssClassNames option :

使用此属性为表格的特定元素分配自定义CSS

Use this property to assign custom CSS to specific elements of your table

通过上述链接查看文档 cssClassNames 支持的每个属性的完整描述。

Check the doc via the above link to see a full description of each property supported by cssClassNames.

非常简单，根据 Google Playground表示例，如果您覆盖所有属性，表格将（几乎）没有Google CSS。

Very simply, based on the Google Playground Table example, if you override all the properties, the table will be (almost) free of Google CSS.

您可以在playground示例中复制以下代码来尝试：

You can try it by copying the following code in the playground example :

// 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。

This should let the Twitter Bootstrap CSS alone.

CSS加载仍然会改变一些东西，但是如果你只是删除类 google-visualization-table-table 。你应该在每个 .draw（）调用后执行。

The CSS loaded still changes a few things, but seems to go away if you simply remove the class google-visualization-table-table. You should do that after each .draw() call.

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

---

更新：如果您使用页面选项，可以使用此代码段在分页时删除类：

---

Update : if you are using the page option, you can use this snippet to remove the class when paging :

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 ）

Don't forget to call the .removeClass() on initialization too (you should make a function, like there : http://pastebin.com/zgJ7uftZ )

这篇关于如何防止加载google chart表css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！