reactjs - 重新绘制图表上方的图例

问题描述

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

标签： reactjsrecharts

reactjs - 重新绘制图表上方的图例

问题描述

解决方案

推荐阅读