使用 react-vis 库在标签下无法正确呈现条形系列

Question

我运行遇到了问题。酒吧系列不在其标签下。我不知道出了什么问题。

这是它的代码

const FlexibleXYPlot = makeWidthFlexible(XYPlot);


<FlexibleXYPlot height={graphContainer.height} margin={graphContainer.margin} xDistance={0} xType="ordinal">
        <HorizontalGridLines />
        <XAxis/>
        <YAxis orientation="right" style={yAxisStyles} />
        {  this.state.data.map((lineData, i) => (
      <VerticalBarSeries
        key={i}
        data={lineData.timeline}
      />
    )); }
      </FlexibleXYPlot>

数据是这样的

[
    {
      "timeline": [
        {
          "x": "dataA",
          "y": 12.21
        }
      ]
    },
    {
      "timeline": [
        {
          "x": "dataB",
          "y": 21.09
        }
      ]
    },
    {
      "timeline": [
        {
          "x": "dataC",
          "y": 16.66
        }
      ]
    }

Answer 1

我明白了。

我为每个小节创建了一个单独的系列。我只需要将整个数据传递给一个系列。现在，如果有人希望每个条形在单个系列中具有不同的颜色，他们可以使用如下所示的数据传递颜色

[
    {
          "x": "dataA",
          "y": 12.21,
          "color": <something>
    },
    {

          "x": "dataB",
          "y": 21.09,
          "color": <something>
    },
    {
          "x": "dataC",
          "y": 16.66,
          "color": <something>
    }
]

我们需要将 colorType="literal" 传递给系列本身。

使用 react-vis 库在标签下无法正确呈现条形系列

Bar series not rendering correctly under label using the react-vis library

charts

reactjs

react-vis