Google Charts の Table を使用するたびに、Google ローダーが読み込みhttp://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css
、ブートストラップ css をほぼ強制終了します。:)
注: table.css ファイルを変更することはできません。
CSSファイルの読み込みを防ぐことができる方法を知っていますか?
助けてくれてありがとう。
PS: ええ、私は JS で試しましたが、ページを切り替えるとテーブルが再コンパイルされるため、tableページ化するたびに のクラス名を置き換える必要があります。
Google Chart Table API Docsに見られるように、cssClassNamesオプションを設定することで、使用される CSS クラスをオーバーライドできます。
このプロパティを使用して、テーブルの特定の要素にカスタム CSS を割り当てます
でサポートされている各プロパティの完全な説明については、上記のリンクからドキュメントを確認してくださいcssClassNames。
非常に簡単に言えば、 Google Playground Table exampleに基づいて、すべてのプロパティをオーバーライドすると、テーブルは (ほとんど) Google 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 はまだいくつか変更されていますが、単純に class を削除すると消えてしまうようです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）
bodyあなたのクラスを与えます。次に、そのクラスを利用して CSS をスコープします。
<body class="my">..</body>
.my .google-visualization-table-table { /* blah */ }
私の考えは、より具体的なセレクターを介してグーグルをオーバーライドするために、ここにいる他のいくつかのアイデアと同じです。ブートストラップを使用すると、おそらくこれを行う最も簡単な方法は次のようになると思います。
idhtml タグに を設定します。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てください。詳細な説明については、以下の CSS 出力を参照してください。html { font-size: 100% }html
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*
以下の例の table.js のように、google api がロードする 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>
これが何かに違反しているかどうかはよくわかりませんが、非常にハックなソリューションです。明らかに、これには結果があります。
そこには2つの可能性しかありません。すべての 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;
}
}());
もちろん、これはスタイルシートがスタイル要素内で @import されるのを妨げるものではありません。したがって、これは解決策というよりは汚いハックです…</p>
残念なことに、Google の API には「nocss」オプションが用意されていますが、可視化モジュールではサポートされていません。
EDIT：ブラウザがdefineSetterをサポートしている場合、スタイルシートをロードしなくなります。
これはあなたの問題を解決するはずです：リンク
リンクから取得：
CSS クラス名にプレフィックスを追加する
var cssClassNames = {
'tableCell': 'myTable myBorder'};
CSS の減速を次のように変更します。
.myTable.myBorder {
border: 1px solid #6699FF;
font-size:11px;
color:#226180;
padding:135px;
margin:135px;
}
jQueryがインストールされているので簡単：
jQuery(document).ready(function ($) {
$('*[class*=google-visualization]').attr('class', function() {
return $(this).attr('class').replace('google', 'yahoo')
})
});