1

我目前正在使用 React-Plotly，我的图表似乎总是在每个图表周围都有一个空白区域，比如边距。我试图在情节中专门设置没有边距，使用 CSS，我也将自动大小和响应都设置为 true。检查组件时，它似乎也没有边距，图表的组件似乎比 小得多，正如我将在屏幕截图中演示的那样。

MainPage.js - 此文件包含加载到图中的组件。

        <Row>
            <Col lg='4'>
                <ChartContainer chartType='treemap' />
            </Col>
            <Col lg='4'>
                <ChartContainer chartType='line' />
            </Col>
            <Col lg='4'>
                <ChartContainer chartType='line' />
            </Col>
        </Row>
        <Row>
            <Col lg='4'>
                <ChartContainer chartType='table' />
            </Col>
            <Col lg='4'>
                <ChartContainer chartType='table' />
            </Col>
            <Col lg='4'>
                <Row>
                    <Col className='h-50' lg='12'>
                        <ChartContainer chartType='table' />
                    </Col>
                </Row>
                <Row>
                    <Col  className='h-50' lg='12'>
                        <ChartContainer chartType='table' />
                    </Col>
                </Row>
            </Col>
            
        </Row>

ChartContainer.js - 此文件根据道具加载到特定的图表组件中。

import React from 'react'
import {
    Card,CardHeader, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button
  } from 'reactstrap';
import LineChart from '../LineChart';
import Table from '../Table';
import Treemap from '../Treemap';


const ChartContainer = ({chartType}) => {
    const displayChart = () => {
        if(chartType == 'treemap'){
            return <Treemap />
        } 
        else if(chartType == 'line'){
            return <LineChart />
        }else if(chartType == 'table'){
            return <Table />
        }
    } 
    return (
            <div>
                {displayChart()}
            </div>
    )
}

export default ChartContainer

所有图表都表现出相同的行为，所以我只记录其中的 1 个。

LineChart.js

import React from 'react'
    import Plotly from "plotly.js-strict-dist";
    import createPlotlyComponent from "react-plotly.js/factory";
    import {japan, canada, jhusa} from '../../tempdata'
    const Plot = createPlotlyComponent(Plotly);
    const LineChart = () => {
    
    return (
        <Plot
        data={[japan, canada, jhusa
        ]}
        layout={
          [{
            autosize: 'true',
             margin: {
              l: 0,
              r: 0,
              b: 0,
              t: 0,
              pad: 0
            },
          }]
        }
        style={{ width: '100%', height: '100%' }}
        config=
        {{ displayModeBar: false,responsive: true, }
        }
      />
    )
}
export default LineChart

接下来，我将展示组件的屏幕截图。（图片链接在下面）在第一张图片中，您可以看到我希望图表填充的大突出区域，除了中间的实际图表要小得多，并且周围似乎有一层边距图本身。这在代码中被指定为 0，并且您还可以看到这里没有绿色或橙色高亮显示，表示没有填充或边距。

在第二张图中，您可以看到 plotly 图表的文件结构。高光保持与第一张图片相同，直到图层。上面的层，仍然像第一层一样占据适当的大容器。我希望突出显示图形本身的图层填充更大的容器。请注意，此行为也与所有其余图表保持一致。感谢您抽出宝贵时间阅读本文，请随时放弃任何可以提供帮助的评论或问题。

显示需要填充的较大容器。

显示图形占用的区域太小

如何将内部图形的大小推到外部容器？

4

0 回答 0