1

次のコードを使用する 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

4 に答える 4

2

CSS を作成したら、これが機能するための鍵であることがわかりました。

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

table.draw(data,options);

ディレクティブ cssClassNames に「ティック」を含む文字列を強制し、宣言したオブジェクトを使用して、公開されたテーブル要素名に使用する CSS クラスを定義してください。

于 2014-12-05T15:42:20.053 に答える
0

詳細については、 https://developers.google.com/chart/interactive/docs/gallery/tableを参照してください。ただし、head タグで独自のスタイル シートにリンクしてから、クラスを参照できるはずです。 JS。私が確信していないのは、Wordpress でカスタム CSS ファイルを作成できるかどうかだけですが、これは一般的な考え方です。

HTML:

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

Javascript:

var cssClassNames = {headerRow: 'myAwesomeClass'};

CSS:

.myAwesomeClass {
   font-size: 24px;
}
于 2013-09-29T17:40:43.870 に答える
0

私も Google チャートは初めてですが、非常に多くのオプションを調査したので、表のスタイルを設定する方法をよく理解しています。

適切な Google の例については、次のリンクを参照してください: https://developers.google.com/chart/interactive/docs/examples?hl=fr

最終的に、テーブルの行にクラス名を割り当てます。必要な CSS コードを割り当てることができます。インライン CSS を使用する方法もありますが、お勧めしません。

インライン スタイルは次のとおりです。

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

書式設定などを追加することもできます。

さらに明確にする必要がある場合は、遠慮なく私のスレッドに返信してください。

于 2014-04-08T21:16:58.073 に答える
0

CSS プロパティの最後に !important を試しましたか?

CSS の例:

.headerRow {
    color: #000!important;
}

!important プロパティは、そのルールが CSS のどこに表示されても常に適用されます。

于 2018-10-17T03:44:59.113 に答える