我想在 react-vis 的 VerticalBarSeries 中的每个 rect(bar) 元素上方显示字符串或数值。并且值应该刚好高于条形高度。另外，如何更改 barSeries 的条形高度、宽度和边距。我使用了 display: flex 来使乘法条形图出现在每个条形图旁边还有其他方法吗？下面是我的代码：
import React from 'react';
import {
XYPlot,
XAxis,
YAxis,
makeVisFlexible,
makeWidthFlexible,
makeHeightFlexible,
VerticalBarSeries,
VerticalBarSeriesCanvas
} from 'react-vis';
const myDATA = [
{ y: 100, x: "Jan" },
{ y: 112, x: "Feb" },
{ y: 230, x: "Mar" },
{ y: 250,x: "Apr" },
{ y: 270,x: "grbd" },
];
const yDomain = myDATA.reduce(
(res, row) => {
return {
max: Math.max(res.max, row.y),
min: Math.min(res.min, row.y)
};
},
{max: -Infinity, min: Infinity}
);
export default class Example extends React.Component {
state = {
useCanvas: false
};
render() {
const FlexibleXYPlot = makeVisFlexible(XYPlot);
const FlexibleWidthXYPlot = makeWidthFlexible(XYPlot);
const FlexibleHeightXYPlot = makeHeightFlexible(XYPlot);
const data = myDATA;
const chartWidth = 150;
const chartHeight = 300;
const chartDomain = [0, chartHeight]
return (
<div style={{display: 'flex'}}>
<FlexibleXYPlot
xType="ordinal"
width={chartWidth}
height={chartHeight}
yDomain={chartDomain}
style={{float: 'left'}}
margin={{left: 40, right: 10, top: 10, bottom: 40}}
>
<VerticalBarSeries
data={data}
/>
</FlexibleXYPlot>
<XYPlot
xType="ordinal"
width={chartWidth}
height={chartHeight}
yDomain={chartDomain}
style={{float: 'left'}}
>
<VerticalBarSeries
data={data}
/>
</XYPlot>
<XYPlot
xType="ordinal"
width={chartWidth}
height={chartHeight}
yDomain={chartDomain}
float='left'
style={{float: 'left'}}
>
<VerticalBarSeries
data={data}
/>
</XYPlot>
</div>
)
}
}