5

抱歉，我没有显示整个代码，但它是我公司私有的。这是一张图片。打开链接你就会明白我的意思。（我不明白 Stackoverflow 不允许短问题的原因）

图例（日期）与图表中的标签相交

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>

4

5 回答 5

5

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

于 2019-09-04T03:08:40.487 回答
3

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

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

在此处输入图像描述

此处提及的图例放置代码很少

于 2020-03-22T04:24:44.643 回答
1

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

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

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

于 2021-02-24T12:46:47.070 回答
0

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

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

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

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

于 2021-07-04T18:28:49.897 回答
0

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

于 2021-02-25T07:46:39.003 回答