xAxis скрывается после изменения размера в реактивной таблице - PullRequest
Новая
       27

xAxis скрывается после изменения размера в реактивной таблице

1 голос
/ 23 января 2020

Я использую библиотеку Rechart для создания линейного графика. Когда я изменяю размер окна моего браузера, значения или галочки в xAxis скрываются. Но я не хочу, чтобы значения в xAxis были скрыты. Пожалуйста, предоставьте решение, чтобы избежать скрытия значений в xAxis.

Код компонента Моя линейная диаграмма 

import React from 'react'
import {
  LineChart, Line, XAxis, YAxis, ResponsiveContainer, CartesianGrid, Tooltip, Legend, ReferenceLine,
} from 'recharts';
import { lineChartXAxis, lineChartYAxis } from './chart.config';
// styles
import useStyles from "./styles";

const LineCharts = ({ dimensions, data, XAxisDataKey }) => {
    const {chartOuterWrap, chartInnerWrap} = useStyles()
    return ( 
        <div className={chartOuterWrap} style={dimensions}>
          <div className={chartInnerWrap}>
            <ResponsiveContainer>
              <LineChart height={'100%'} width={'100%'} data={data}>
                  <XAxis dataKey={XAxisDataKey}
                  tick={true}
                  interval={'preserveStartEnd'}
                  {...lineChartXAxis}
                  />
                  <YAxis
                  interval={0}
                  tick={true}
                  {...lineChartYAxis}
                   />
                  <Tooltip />
                  <Line type="monotone" strokeWidth={3} dataKey="uv" stroke="#24b32a" />
                  <Line type="monotone" strokeWidth={3} dataKey="pv" stroke="#fb8c00" />
                  <Line type="monotone" strokeWidth={3} dataKey="amt" stroke="#e53935" />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
    );
}

export default LineCharts;

Я также приложил изображение для упрощения понимания проблемы

enter image description here

После изменения размера окна

enter image description here

1 Ответ

1 голос
/ 29 января 2020

Это известная ошибка с Recharts, и решение состоит в том, чтобы использовать настраиваемые отметки: 

const CustomizedAxisTick = props => {
  const { x, y, payload } = props

  return (
    <g transform={\`translate(${x},${y})\`}>
      <text dy={16} textAnchor='middle' fill='#666'>{payload.value}</text>
    </g>
  )
}

Затем в типах диаграмм AreaChart, BarChart, LineChart, ComposedChart или ScatterChart включите tick реквизит в XAxis 

<XAxis tick={<CustomizedAxisTick />} />

, как это Пример CustomizedLabelLineChart . Поэкспериментируйте с настройками в этом codesandbox .

...