如何更改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"));

Please see the image

解决方法

使用以下配置选项更改宽度，
或任何其他样式的表格单元格。

首先，我们必须包括...

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