时间戳

首页 > 解决方案 > 如何更改 react-google-charts 表中框的宽度？

charts - 如何更改 react-google-charts 表中框的宽度？

问题描述

现在，我使用 - https://react-google-charts.com/table-chart#simple-example创建了表格。但我无法使用 react 更改框的宽度。我找到了使用 JavaScript 的 Bar-format 文档 - 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' },
                            { type: 'string', label: 'GAME - 2' },
                            { type: 'string', 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 C (Home) vs Team D (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"));

请看图片

标签： chartsgoogle-visualizationreact-google-charts

解决方案

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

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

allowHtml: true

接下来，我们为表格单元格分配一个 css 类名......

cssClassNames: {
  tableCell: 'game-cell'
}

例如

options={{
  allowHtml: true,
  cssClassNames: {
    tableCell: 'game-cell'
  },
  showRowNumber: false,
}}

然后我们将 css 类添加到页面的某处，
或者在标签中，或者在使用标签<style>的单独 css 文件中<link>

.game-cell {
  width: 400px;
}

如果要为单元格分配特定宽度，请使用上面的 css。

如果要防止换行到两行，请使用以下...

.game-cell {
  white-space: nowrap;
}

推荐阅读