更改数据表的列背景

Question

我正在尝试将只有一列名为Fund1的背景颜色更改为浅橙色，以便它看起来像这样的数据表。

<<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

可以一类Fund1列下使用的单元格对象，as described here的p属性添加到每一个细胞。然后使用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>