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

Question

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


    )
  }
}

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>

React-vis 提示

希望这能解决您的问题。

Answer 2

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

文档中有一个例子：

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

我不确定条的高度，但可以通过VerticalBarSeries 中的 barWidth 属性控制宽度和边距