重新绘制图表上方的图例答案

【问题标题】：recharts legend above chart重新绘制图表上方的图例
【发布时间】：2018-12-15 20:23:10
【问题描述】：

抱歉，我没有展示整个代码，但它是我公司私有的。这是一张照片。打开链接你就会明白我的意思。（我不明白 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>

【问题讨论】：

标签： reactjs recharts

【解决方案1】：

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

【讨论】：

【解决方案2】：

wrapperStyle 正如 James 所说的那样工作。下面的也应该可以正常工作

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

很少提及图例放置代码here

【讨论】：

【解决方案3】：

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

{barChartData && barChartData.length > 0 && (
        <ResponsiveContainer
          width="100%"
          height="99.5%"
          className={classes.boxContainer}
        > 
           <YourChart />
        </ResponsiveContainer>
      )}

如果您设置wrapperStyle={{top: 0, left: 25}}，那么如果图表高度是动态的，它可能不起作用。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

这里和 Github 线程上的许多 css 修复工作，但仅当图表上的线数是静态的/在第一次渲染后不改变时。

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

我真的希望这能帮助一些喜欢它的人。

【讨论】：