如何解决如何更改react-google-charts表中框的宽度?
现在,我已经使用-https://react-google-charts.com/table-chart#simple-example创建了表格。 但是我无法使用react更改盒子的宽度。 我已经找到了使用JavaScript的Bar格式的文档-https://developers.google.com/chart/interactive/docs/reference#barformat
有人可以帮我解决这个问题吗?
export default class App4 extends React.Component {
render() {
return (
<div className={"todo-item2"}>
<Chart
width={'500px'}
height={'300px'}
chartType="Table"
loader={<div>Loading Chart</div>}
data={[
[
{ type: 'string',label: 'DATE' },{ type: 'string',label: 'GAME - 1' },label: 'GAME - 2' },label: 'GAME - 3' },],['2020-04-01','Team A (Home) vs Team B (Visitor)','Team C (Home) vs Team D (Visitor)','Team E (Home) vs Team F (Visitor)'],['2020-04-02','Team F (Home) vs Team A (Visitor)','Team D (Home) vs Team C (Visitor)','Team F (Home) vs Team B (Visitor)'],['2020-04-03','Team B (Home) vs Team A (Visitor)','Team F (Home) vs Team E (Visitor)'],]}
options={{
showRowNumber: false,width: '10000px',//height: '500px',}}
rootProps={{ 'data-testid': '1' }}
/>
</div>
);
}
}
ReactDOM.render(<App4 />,document.getElementById("root"));
解决方法
使用以下配置选项更改宽度,
或任何其他样式的表格单元格。
首先,我们必须包括...
allowHtml: true
接下来,我们为表单元格分配一个CSS类名称...
cssClassNames: {
tableCell: 'game-cell'
}
例如
options={{
allowHtml: true,cssClassNames: {
tableCell: 'game-cell'
},showRowNumber: false,}}
然后将css类添加到页面的某处,
在<style>
标签中,或在使用<link>
标签的单独的CSS文件中
.game-cell {
width: 400px;
}
如果要为单元格分配特定的宽度,请使用上面的CSS。
如果要防止换行到两行,请使用以下命令...
.game-cell {
white-space: nowrap;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。