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

【问题标题】：How to give value above each bar in bar chart of react-vis?如何在react-vis条形图中的每个条形上方给出值？
【发布时间】：2019-12-02 08:28:27
【问题描述】：

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


    )
  }
}

【问题讨论】：

标签： javascript reactjs react-vis

【解决方案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 Hint

希望这能解决您的问题。

【讨论】：

【解决方案2】：

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

文档中有一个例子：

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

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

【讨论】：