I am trying to change the background color of only one column called Fund1 to a light orange so it stands out for a datatable which looks like this.
<<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%'});
}
You can add a class to every cell under the Fund1
column using the p
property of the cell object, as described here . Then using CSS, you can add a background color to each cell.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.