javascript - 如何在 Recharts 中为 YAxis 创建自定义垂直标签，以防标签太长？

Question

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

A picture of my labels that got cut off

我尝试使用带有 <Text> 的自定义标签元素 - 如果我通过 scaleToFit={true}，它会通过缩小标签来解决切断问题 Prop

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

如何解决？

Answer 1

找到了一个解决方案 - 你应该在元素中使用 'angle' 属性而不是 'transform="rotate(x)"。