Question

对不起，我没有显示完整的代码，但是它是我公司的私人所有。这是一张照片。打开链接，您将了解我的意思。（我不明白Stackoverflow不允许简短问题的原因）

Legend (dates) intersects labels in chart

var barStores = [];
      //for (let n = 0; n < this.state.storeNames.length; n++) {
      for (let n = 0; n < 100; n++) {
        let storeName = this.state.storeNames[n];
        let randc = getRandomColor();
        barStores.push(
          <Bar dataKey = {storeName} stackId = "a" fill = {randc}  />
        );
      }

      const graph = (
        <BarChart width={1200} height={700} data={data2}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis type="category" dataKey="name" angle={-45} textAnchor="end"/>
          <YAxis type="number" />
          <Tooltip />
          <Legend verticalAlign = "bottom" />
          {barStores}
        </BarChart>
      );
      return graph;

body {
  margin: 0;
}
#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 800px;
  /*height: 800px;*/
  background-color: #fff;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#000000">
    <title>Panel - BigQuery</title>
    <link rel="stylesheet" type="text/css" href="theme.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Answer 1

尝试使用<Legend wrapperStyle={{top: 0, left: 25}}/>，并假设您将其包装在具有定义高度的ResponsiveContainer中，应该可以。

Answer 2

wrapperStyle的工作方式如James所述。下面的一个也应该可以正常工作

<Legend layout="horizontal" verticalAlign="top" align="center" />

很少提及图例位置代码here

Answer 3

对我有用的解决方案是检查 null 数据和 bar chart，然后显示是否可用。您可以在 github issue 上阅读更多内容。

length

如果您设置了 {barChartData && barChartData.length > 0 && ( <ResponsiveContainer width="100%" height="99.5%" className={classes.boxContainer} > <YourChart /> </ResponsiveContainer> )}，那么如果图表高度是动态的，它可能不起作用。

Answer 4

对我有用的是设置图例属性。 wrapperStyle={{ position: 'relative' }}

Answer 5

我花了很多时间试图为复杂的重新图表用例找出这个错误。

此处和 Github 线程上的许多 css 修复都有效，但仅当图形上的行数是静态的/在首次渲染后不发生变化时才有效。

单击此处查看适用的解决方案（发布在 gitlab 问题上） https://github.com/recharts/recharts/issues/172#issuecomment-873633726

我真的希望这能帮助一些像它帮助过我的人。

图表上方的图例

5 个答案: