如何在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 屬性控制寬度和邊距