データテーブルの列の背景を変更する

Question

Fund1という1つの列の背景色を明るいオレンジ色に変更しようとしていますので、このようなデータテーブルが目立ちます。

<<script type="text/javascript"src="https://www.gstatic.com/charts/loader.js">  </script> 
    <div id="table_div"></div> 
    <style> 
.google-visualization-table-td { 
text-align: center !important; 
} 




google.charts.load('current', {'packages':['table']}); 
    google.charts.setOnLoadCallback(drawTable); 

    function drawTable() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', ' '); 
    data.addColumn('number', 'Fund1'); 
    data.addColumn('number', 'Fund2'); 
    data.addColumn('number', 'Fund3'); 
    data.addRows([ 
     ['Sales commission', {v:0, f:'0%'}, {v: 5.75, f: '5.75%'}, {v:6, f:'6%'}], 
     ['Service/Trailer Fee', {v:0, f:'0%'}, {v:0, f: '0%'}, {v:0.5, f:'0.5%'}], 
     ['Redemption Fee', {v:0, f:'0%'}, {v: 0, f: '0%'}, {v:8, f:'≤8%'}], 
     ['Management Fee', {v:2, f:'2%'}, {v: 2, f: '2%'}, {v:2.5, f:'2.5%'}], 
     ['Minimum Investment', {v:1000, f:'$1,000'}, {v: 2500, f: '$2,500'}, {v:500, f:'$500'}], 
     ['Maturity', {v:1, f:'≤1 year'}, {v: 2, f: '2 years'}, {v:8, f:'8 years'}] 
    ]); 


    var table = new google.visualization.Table(document.getElementById('table_div')); 

    table.draw(data, {showRowNumber: false, width: '750%', height: '100%'}); 

    } 

Answer 1

あなたは、セルオブジェクト、as described hereのpプロパティを使用してFund1列の下のすべてのセルにクラスを追加することができます。その後、CSSを使用して、各セルに背景色を追加できます。解決のための

google.charts.load('current', { 
 
    'packages': ['table'] 
 
}); 
 
google.charts.setOnLoadCallback(drawTable); 
 

 
function drawTable() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', ' '); 
 
    data.addColumn('number', 'Fund1'); 
 
    data.addColumn('number', 'Fund2'); 
 
    data.addColumn('number', 'Fund3'); 
 
    data.addRows([ 
 
    ['Sales commission', { 
 
     v: 0, 
 
     f: '0%', 
 
     p: { 
 
     className: 'fund1Cell' 
 
     } 
 
    }, { 
 
     v: 5.75, 
 
     f: '5.75%' 
 
    }, { 
 
     v: 6, 
 
     f: '6%' 
 
    }], 
 
    ['Service/Trailer Fee', { 
 
     v: 0, 
 
     f: '0%', 
 
     p: { 
 
     className: 'fund1Cell' 
 
     } 
 
    }, { 
 
     v: 0, 
 
     f: '0%' 
 
    }, { 
 
     v: 0.5, 
 
     f: '0.5%' 
 
    }], 
 
    ['Redemption Fee', { 
 
     v: 0, 
 
     f: '0%', 
 
     p: { 
 
     className: 'fund1Cell' 
 
     } 
 
    }, { 
 
     v: 0, 
 
     f: '0%' 
 
    }, { 
 
     v: 8, 
 
     f: '≤8%' 
 
    }], 
 
    ['Management Fee', { 
 
     v: 2, 
 
     f: '2%', 
 
     p: { 
 
     className: 'fund1Cell' 
 
     } 
 
    }, { 
 
     v: 2, 
 
     f: '2%' 
 
    }, { 
 
     v: 2.5, 
 
     f: '2.5%' 
 
    }], 
 
    ['Minimum Investment', { 
 
     v: 1000, 
 
     f: '$1,000', 
 
     p: { 
 
     className: 'fund1Cell' 
 
     } 
 
    }, { 
 
     v: 2500, 
 
     f: '$2,500' 
 
    }, { 
 
     v: 500, 
 
     f: '$500' 
 
    }], 
 
    ['Maturity', { 
 
     v: 1, 
 
     f: '≤1 year', 
 
     p: { 
 
     className: 'fund1Cell' 
 
     } 
 
    }, { 
 
     v: 2, 
 
     f: '2 years' 
 
    }, { 
 
     v: 8, 
 
     f: '8 years' 
 
    }] 
 
    ]); 
 

 

 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
 

 
    table.draw(data, { 
 
    showRowNumber: false, 
 
    width: '750%', 
 
    height: '100%' 
 
    }); 
 

 
}

.google-visualization-table-td { 
 
    text-align: center !important; 
 
} 
 

 
td.fund1Cell { 
 
    background-color: #ffdd77; 
 
} 
 

 
tr[class*="-over"] td.fund1Cell { 
 
    background-color: #ffbb55; 
 
}

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