如何在 react-vis 的条形图中给出每个柱上方的值?

Question

我想在 react-vis 的 VerticalBar Series 中的每个 rect(bar( 元素上方显示字符串或数值。 并且值应刚好高于条形高度。 另外，如何更改条形图系列的条形高度，宽度和边距。 我使用过 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>

)
}
}

Answer 1

来显示条形图的值，您可以使用 React vis 中提供的Hint组件。 在VerticalBarSeries中使用onValueMouseOver onValueMouseOut来调用函数来设置和删除变量中的值。然后在"Hint显示"中使用该值。

<Hint value={value}>
<p>{value.x + " X Value"}</p>
<p>{value.y + " Y Value"}</p>
</Hint>

反应

提示希望这能解决您的问题。

Answer 2

要为每个条形图赋予值，请使用 LabelSeries。

文档中有一个示例：

https://github.com/uber/react-vis/blob/51aa38da2e01c9ad17ae4cb7594943349e87e687/showcase/plot/bar-chart.js

我不确定条形高度，但宽度和边距可以通过垂直条形系列中的条形宽度道具控制