如何在 Recharts 中为 YAxis 创建一个自定义垂直标签，以防标签太长时缩放以适应？答案

【问题标题】：How to create in Recharts a custom vertical label for the YAxis that will scale to fit in case the label is too long?如何在 Recharts 中为 YAxis 创建一个自定义垂直标签，以防标签太长时缩放以适应？
【发布时间】：2019-07-10 13:37:30
【问题描述】：

我正在使用 Recharts 库构建一些组合图表，YAxis 上的一些垂直标签太长并且被切断。

A picture of my labels that got cut off

我尝试使用带有 <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')
);

但标签不旋转并保持水平。

This is a link to my fiddle reproducing the issue

如何解决？

【问题讨论】：

标签： javascript reactjs recharts

【解决方案1】：

找到了解决方案 - 您应该在元素中使用“角度”道具，而不是“变换 =”旋转（x）“。

【讨论】：