设置google.visualization.DataTable的列宽
我想更改google.visualization.DataTable中列的宽度,但是,我不知道该怎么做。
提琴手: https : //jsfiddle.net/dgbh6sL0/1/
HTML
JS
google.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); }
期望
- ‘名称’列宽应为300px;
- “全职员工”列宽应为100px;
任何建议/帮助表示赞赏。
编辑
基于这个建议,这里是应用的解决方案: https : //jsfiddle.net/dgbh6sL0/2/
你可以这样做:
data.setProperty(0, 0, 'style', 'width:300px');
此外,您需要在“绘制”中“allowHTML”,如:
table.draw(data, {showRowNumber: true, width: '100%', height: '100%',allowHtml: true});
在相关的说明中,您可以通过覆盖标题单元格white-space
css来覆盖疯狂的单行标题,该标题最终会非常长:
table.draw(data, {showRowNumber: true, width: '100%', height: '100%', allowHtml: true, cssClassNames: {headerCell: 'normal-whitespace'}});
然后在你的CSS中添加:
.normal-whitespace { white-space: normal; }
例如https://jsfiddle.net/3j10g8n9/