独自のスタイルを変更せずにgoogle.visualization.DataTableに別のスタイルを追加する方法

Question

タイトルに記載されているとおり、自分のスタイルを変更せずに別のスタイルをgoogle.visualization.DataTableに追加する方法は？

テーブルヘッダーをスティッキーにし、テーブルヘッダーの背景色を追加するために、別のcssクラスを追加しました。私はCSSの "cssClassNames"クラスを追加した後、テーブルの独自のスタイルが消えました：マウスのホバー時に、デフォルトの行背景色とテーブル行の強調表示。

これは私のコードです：

var data=new google.visualization.DataTable(); 

    data.addColumn('string','Name'); 
    data.addColumn('string','Type'); 
    data.addColumn('number','meter'); 
    data.addColumn('string','Event'); 
    data.addColumn('string','Status'); 

    data.addRows(Data.length); 
    for(i=0;i<Data.length;i++){ 

     data.setCell(parseInt([i]),0,Data[i]['ID']); 
     data.setCell(parseInt([i]),1,Data[i]['Name']); 
     data.setCell(parseInt([i]),2,parseInt(Data[i]['Total'])); 
     data.setCell(parseInt([i]),3,'change'); 
     data.setCell(parseInt([i]),4,'OK'); 
     } 

    var cssClassNames = {tableRow :"tableRowGoogle",headerCell :"headercellgoogle",rowNumberCell : "rowNumberCell",tableCell : "rowcellgoogle"}; 

    var options=null; 
    if(data.getNumberOfRows()>7){ 
     options = { 
        width : '100%', 
        height:550, 
      sort : 'enable', 
      sortColumn : 1, 
      sortAscending : false, 
      scrollLeftStartPosition : 50, 
      showRowNumber : true, 
      allowHtml :true, 
      cssClassNames : cssClassNames 
     }; 
    }else{ 
     options = { 
      width : '100%', 
      sort : 'enable', 
      sortColumn : 1, 
      sortAscending : false, 
      scrollLeftStartPosition : 50, 
      showRowNumber : true, 
      allowHtml :true, 
      cssClassNames : cssClassNames 
     }; 
    } 
    var table = new google.visualization.Table(document.getElementById('SummaryTable')); 
    table.draw(data, options); 

    google.visualization.events.addListener(table, 'select', function() { 
      var row = table.getSelection()[0].row; 
      popDevInfo(data.getValue(row, 0)); 
      }); 

それのデフォルトのスタイルに影響を与えずに、テーブルに追加のスタイルを追加する方法は？ 何か提案がありがとうございます。

Answer 1

は、オプションで
をcssClassNamesを供給していないだけので、あなたが他のHTMLテーブル

として、それらをスタイルすることができ
、表チャートは、通常のHTMLテーブル要素を生成ページのどこかに

を追加この例では、2つのテーブルが描画されます。次のCSSを使用して
は、両方のチャートは、緑色の枠

table { 
    border: 2px solid lime; 
} 

を持つことになり、次のCSSは唯一の2つ目のグラフに影響します - それは、セレクタを見つけるだけの問題だchart_div_1

#chart_div_1 th { 
    color: magenta; 
    text-align: left; 
} 

#chart_div_1 tr { 
    outline: thin solid cyan; 
} 

をあなたのニーズを満たす...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses'], 
 
     ['2004', 1000,  400], 
 
     ['2005', 1170,  1170], 
 
     ['2006', 660,  1120], 
 
     ['2007', 1030,  540], 
 
     ['2008', 660,  660], 
 
     ['2009', 1030,  540] 
 
    ]); 
 

 
    var options = { 
 
     allowHtml: true, 
 
     showRowNumber: true, 
 
     sortAscending: false, 
 
     sortColumn: 0, 
 
     width: '100%' 
 
    }; 
 

 
    new google.visualization.Table(document.getElementById('chart_div_0')).draw(data, options); 
 
    new google.visualization.Table(document.getElementById('chart_div_1')).draw(data, options); 
 
    }, 
 
    packages:['table'] 
 
});

/* style all tables */ 
 
table { 
 
    border: 2px solid lime; 
 
} 
 

 
/* style chart_div_1 only */ 
 
#chart_div_1 th { 
 
    color: magenta; 
 
    text-align: left; 
 
} 
 
#chart_div_1 tr { 
 
    outline: thin solid cyan; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div_0"></div> 
 
<br/> 
 
<div id="chart_div_1"></div>