Как создать в Recharts настраиваемую вертикальную метку для YAxis, которая будет масштабироваться по размеру, если метка слишком длинная? - PullRequest
Новая
       20

Как создать в Recharts настраиваемую вертикальную метку для YAxis, которая будет масштабироваться по размеру, если метка слишком длинная?

0 голосов
/ 10 июля 2019

Я строю несколько составных диаграмм с использованием библиотеки Recharts, и некоторые из вертикальных меток на YAxis слишком длинные и обрезаются.

Изображение моих ярлыков, которые обрезались

Я пытался использовать пользовательскую метку с элементом <Text> - это решает проблему обрезания, уменьшая метку, если я передаю scaleToFit={true} проп 

const {PropTypes} = React;
const {ComposedChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Text} = Recharts;
const data = [{name: 'Page A', uv: 590, pv: 800, amt: 1400},
              {name: 'Page B', uv: 868, pv: 967, amt: 1506},
              {name: 'Page C', uv: 1397, pv: 1098, amt: 989},
              {name: 'Page D', uv: 1480, pv: 1200, amt: 1228},
              {name: 'Page E', uv: 1520, pv: 1108, amt: 1100},
              {name: 'Page F', uv: 1400, pv: 680, amt: 1700}];

const CustomizedLabelB = ({ kapi, metric, viewBox }) => {
    return (
        <Text
            x={0}
            y={0}
            dx={-300}
            dy={40}
            textAnchor="start"
            width={180}
            transform="rotate(-90)"
            // If I uncomment the next line, then the rotation stops working.
            // scaleToFit={true}
        >            
            This_is_a_very_very_very_long_long_long_label_what_can_we_do_about_it?
        </Text>
    );
};

const SameDataComposedChart = React.createClass({
    render () {
    return (
        <ComposedChart width={600} height={400} data={data}
            margin={{top: 20, right: 20, bottom: 20, left: 20}}>
          <CartesianGrid stroke='#f5f5f5'/>
          <XAxis dataKey="name"  />
          <YAxis label={<CustomizedLabelB />} />
          <Tooltip/>
          <Legend/>
          <Bar dataKey='uv' barSize={20} fill='#413ea0'/>
          <Line type='monotone' dataKey='uv' stroke='#ff7300'/>
       </ComposedChart>
    );
  }
})

ReactDOM.render(
  <SameDataComposedChart />,
  document.getElementById('container')
);

но метка не вращается и остается горизонтальной.

Это ссылка на мою скрипку, воспроизводящую проблему

Как это решить?

1 Ответ

0 голосов
/ 10 июля 2019

Нашли решение - вы должны использовать опору 'angle' в элементе вместо 'transform = "rotate (x)".

...