Javascript 如何在react vis条形图中给出每个条形上方的值？

我想在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>


    )
  }
}

从“React”导入React；
进口{
XYPlot，
XAxis，
亚克斯，
权宜之计，
使其具有灵活性，
使高度灵活，
垂直杆系列，
垂直酒吧
}从“反应到反应”；
常量myDATA=[
{y:100，x:“Jan”}，
{y:112，x:“Feb”}，
{y:230，x:“Mar”}，
{y:250，x:“Apr”}，
{y:270，x:“grbd”}，
];
常量yDomain=myDATA.reduce(
（分辨率，世界其他地区）=>{
返回{
max:Math.max（res.max，row.y），
min:Math.min（res.min，row.y）
};
},
{max:-无限，min:Infinity}
);
导出默认类示例扩展了React.Component{
状态={
useCanvas:错误
};
render（）{
const FlexibleXYPlot=makeVisFlexible（XYPlot）；
const FlexibleWidthXYPlot=makeWidthFlexible（XYPlot）；
常数FlexibleHeightXYPlot=使高度灵活（XYPlot）；
const data=myDATA；
常量图表宽度=150；
常数图表高度=300；
常量chartDomain=[0，chartHeight]
返回(
)
}
}

为每种条形使用赋予价值

文档中有一个示例：

---

我不确定条形图的高度，但宽度和边距可以由

中的barWidth道具控制。要显示条形图的值，您可以使用react vis中提供的

提示

组件。 在

VerticalBarSeries

中使用

onValueMouseOver onValueMouseOut

调用函数来设置和删除变量中的值。然后在

Hint

中使用该值进行显示

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

{value.x+“x值”}

{value.y+“y值”}

希望这能解决你的问题