FlexibleWidthXYPlot 需要固定宽度来渲染

Question

我FlexibleWidthXYPlot在一个组件内部使用，如果组件应该可见并且定义了数据（通过 props），则该组件是有条件渲染的。

但react-vis计算图表宽度width=0（因此图表不显示）。我可以通过像这样重新渲染来使其正确计算宽度：

• 1. 调整浏览器大小
• 2. width将prop设置为固定值。

我不能做 2. 因为图表应该是响应式的。所以我尝试触发调整大小，componentDidMount但也没有运气：

public componentDidMount() {
  window.dispatchEvent(new Event('resize'));
}

我正在xDomain手动设置，所以我尝试了dontCheckIfEmpty={true}，但它也不起作用......

为什么FlexibleWidthXYPlot计算宽度为0？我该如何解决它？

经济概览.tsx

import React from 'react'
import { Theme, createStyles, withStyles, WithStyles, Card } from '@material-ui/core'
import SelectableTabs from './SelectableTabs'
import PaymentsChart from './PaymentsChart'
import MileageChart from './MileageChart'
import { IMileageChart, IPaymentChart } from '@omnicar/sam-types'
import * as api from 'api/api'
import notify from 'utils/notify/notify'

interface IProps {
  id: string
}

type TProps = IProps & WithStyles<typeof styles>

export type TTab = 'payments' | 'mileage'

interface IState {
  activeTab: TTab
  paymentChartData: IPaymentChart | undefined
  mileageChartData: IMileageChart | undefined
}

const styles = ({ spacing }: Theme) =>
  createStyles({
    root: {
      display: 'flex',
    },
    tabs: {
      width: '35%',
      display: 'flex',
    },
    content: {
      width: '65%',
      padding: spacing.unit * 2,
    },
  })

class ContractDetailsEconomyOverview extends React.Component<TProps, IState> {
  public state: IState = {
    activeTab: 'payments',
    paymentChartData: undefined,
    mileageChartData: undefined,
  }

  public componentDidMount() {
    this.loadData()
  }

  public render() {
    const { classes } = this.props
    const { activeTab, paymentChartData, mileageChartData } = this.state

    return (
      <Card className={classes.root}>
        <div className={classes.tabs}>
          <SelectableTabs
            data={{ paymentChartData, mileageChartData }}
            activeTab={activeTab}
            onTabSelect={this.handleTabSelect}
          />
        </div>
        <div className={classes.content}>
          {activeTab === 'payments' && <PaymentsChart data={paymentChartData} />}
          {activeTab === 'mileage' && <MileageChart data={mileageChartData} />}
        </div>
      </Card>
    )
  }
  private handleTabSelect = (activeTab: TTab) => {
    this.setState({ activeTab })
  }

  private loadData = async () => {
    const res = await api.getContractDetailsChartData(this.props.id)

    if (res.errorData || res.networkError) {
      notify.error()
    } else if (res.data) {
      const { paymentChart, mileageChart } = res.data
      this.setState({ paymentChartData: paymentChart, mileageChartData: mileageChart })
    }
  }
}

export default withStyles(styles)(ContractDetailsEconomyOverview)

付款图表

import React, { Component } from 'react'
import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles'
import {
  FlexibleWidthXYPlot,
  YAxis,
  XAxis,
  HorizontalGridLines,
  LineMarkSeries,
  LineSeries,
  DiscreteColorLegend,
  Hint,
} from 'react-vis'
import 'react-vis/dist/style.css'
import { theme } from 'theme'
import { t } from '@omnicar/sam-translate'
import { IPaymentChart, IChartDateValue } from '@omnicar/sam-types'
import { formatDate } from '@omnicar/sam-format'
import Typography from 'components/Typography'
import ChartTooltip from 'components/admin/ChartTooltip'

interface IProps extends WithStyles<typeof styles> {
  data: IPaymentChart
}

interface IState {
  tooltipValue: IChartDateValue | undefined
}

const styles = () =>
  createStyles({
    root: {},
    tooltip: {
      display: 'flex',
    },
    exVat: {
      textAlign: 'right',
      color: theme.palette.text.light,
      fontStyle: 'italic',
    },
    legend: {
      display: 'flex',
      justifyContent: 'space-between',
    },
  })

class PaymentsChart extends Component<IProps, IState> {
  public state: IState = {
    tooltipValue: undefined,
  }
  public legendItems = [
    {
      title: t('Payments'),
      color: '#40A695',
      strokeWidth: 3,
    },
    {
      title: t('Expected payments'),
      color: '#ccc',
      strokeStyle: 'dashed',
      strokeWidth: 3,
    },
    {
      title: t('Costs'),
      color: '#ED7C33',
      strokeWidth: 3,
    },
  ]

  public render() {
    const { classes, data } = this.props
    const { tooltipValue } = this.state
    const curveName = 'curveMonotoneX'

    // transform data
    const earnings = data ? this.transform(data.seriesEarnings) : []
    const costs = data ? this.transform(data.seriesCosts) : []
    const expectedEarnings = data ? this.transform(data.seriesExpectedEarnings) : []

    return (
      <div className={classes.root}>
        {data && (
          <>
            <DiscreteColorLegend items={this.legendItems} orientation="horizontal" />
            <FlexibleWidthXYPlot
              margin={{ left: 60 }}
              height={300}
              xType="time"
              xDomain={[new Date(data.contractStartDate), new Date(data.contractEndDate)]}
            >
              <YAxis />
              <XAxis />
              <HorizontalGridLines />
              <LineSeries
                data={expectedEarnings}
                stroke="#ccc"
                fill="#ccc"
                strokeWidth={3}
                strokeStyle="dashed"
                size={3}
                curve={curveName}
              />
              <LineMarkSeries
                data={costs}
                stroke="#ED7C33"
                fill="#ED7C33"
                strokeWidth={3}
                size={3}
                curve={curveName}
                // tslint:disable-next-line jsx-no-lambda
                onValueMouseOver={(value: IChartDateValue) => {
                  this.setState({ tooltipValue: value })
                }}
                // tslint:disable-next-line jsx-no-lambda
                onValueMouseOut={() => {
                  this.setState({ tooltipValue: undefined })
                }}
              />

              <LineMarkSeries
                data={earnings}
                stroke="#40A695"
                fill="#40A695"
                strokeWidth={3}
                size={3}
                curve={curveName}
                // tslint:disable-next-line jsx-no-lambda
                onValueMouseOver={(value: IChartDateValue) => {
                  this.setState({ tooltipValue: value })
                }}
                // tslint:disable-next-line jsx-no-lambda
                onValueMouseOut={() => {
                  this.setState({ tooltipValue: undefined })
                }}
              />
              {tooltipValue && (
                <Hint value={tooltipValue}>
                  <ChartTooltip value={tooltipValue} />
                </Hint>
              )}
            </FlexibleWidthXYPlot>
            <div className={classes.legend}>
              <div>
                <Typography variant="subheading">{t('Startdate')}</Typography>
                <Typography variant="body2">{formatDate(data.contractStartDate)}</Typography>
              </div>
              <div>
                <Typography variant="subheading">{t('Duration')}</Typography>
                <Typography variant="body2">{`${data.duration.current} / ${data.duration.total}`}</Typography>
              </div>
              <div>
                <Typography variant="subheading">{t('Enddate')}</Typography>
                <Typography variant="body2">{formatDate(data.contractEndDate)}</Typography>
              </div>
            </div>
          </>
        )}
      </div>
    )
  }

  /**
   * Transforms x from string > Date
   */
  private transform = (list: IChartDateValue[]): IChartDateValue[] =>
    list.map(value => ({
      ...value,
      x: new Date(value.x),
    }))
}
export default withStyles(styles)(PaymentsChart)

Answer 1

对我有用的是添加react-virtualized-auto-sizer，如下所示：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import { XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries } from 'react-vis'
import clsx from 'clsx'
import AutoSizer from 'react-virtualized-auto-sizer'

const useStyles = makeStyles({
  plot: {
    height: 300,
    width: '100%'
  },
  hide: {
    display: 'none'
  }
})

function TestChart({ data, hidden }) {
  const classes = useStyles()

  return (
    <div 
      className={clsx(classes.plot, {
        [classes.hide]: hidden
      })}
    >
      <AutoSizer>
        {({ width, height }) => (
          <XYPlot height={height} width={width}>
            <HorizontalGridLines />
            <LineSeries data={data} />
            <XAxis />
            <YAxis />
          </XYPlot>
        )}
      </AutoSizer>
    </div>
  )
}

export default TestChart

无论父级的宽度和高度是多少div，图表都会自动适当调整大小。