0

2 つの質問があります。Google チャート テーブルを作成しようとしています。

A) いくつかの変更を加えることができるように、作成される実際のテーブル要素の ID が必要です。では、テーブル ID を設定/取得するにはどうすればよいですか?

B) テーブルタグにカスタム CSS クラスを追加するにはどうすればよいですか? 基本的に、これらのテーブルに material-design-lite の css を追加したいと考えています。

どうもありがとうございます！

4

1 に答える 1

1

まず、構成オプションcssClassNamesを使用して、グラフの特定の領域に割り当てることができます。

そのような...

headerRow - テーブルのヘッダー行 (要素) にクラス名を割り当てます。

tableRow - ヘッダー以外の行 (要素) にクラス名を割り当てます。

...

それでも問題が解決しない場合は、チャートが になったら、必要に応じて dom を変更できますready。

idチャートを最初に描画するコンテナを指定する必要があります。通常はdiv.

したがって、それを変更するためにidGoogleの を使用する必要はありません。tableJavaScript を使用して定義したコンテナーのコンテンツを参照するだけで、必要なものを見つけることができます。

たとえば、特定のブラウザでスクロールすると、最初の列見出し行がロックされるという既知の問題があります。MicrosoftAjax.js以下は、それを修正するために使用する関数です。 toを使用して、少しごまかしていgetBoundsます。

_googleChartFixScroll: function(sender, args) {
    var googleBounds;
    var googleDivs;
    var googleRows;

    googleDivs = this._containerChart.getElementsByTagName('DIV');

    if (googleDivs.length === 3) {
        googleRows = this._containerChart.getElementsByTagName('TR');
        if (googleRows.length > 0) {
            googleBounds = Sys.UI.DomElement.getBounds(googleRows[0]);
            googleDivs[2].style.height = googleBounds.height + 'px';
        }
    }
},

ポイントは、divチャートに定義した範囲内で、dom を探索する方法を知っていれば、Google チャートを操作できるということです。必要な要素が見つかったら、好きなスタイルを適用できます...

私の例では、テーブルの行数が多すぎて列ヘッダーをロックする必要がある場合は常に、div2 つではなく 3 つの があります。そのため、最初のテーブル行を見つけてロックします。

お役に立てれば...

于 2015-08-31T00:45:51.273 に答える