重新绘制图表上方的图例
抱歉，我没有显示完整的代码，但它是我公司私有的。这是一张照片。打开链接你就会明白我的意思。（我不明白 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>wrapperStyle正如詹姆斯提到的那样。下面的也应该可以正常工作
<Legend layout="horizontal" verticalAlign="top" align="center" />
这里提到了一些图例放置代码
| 归档时间： |
|
| 查看次数： |
20204 次 |
| 最近记录： |