Ряд столбцов некорректно отображается под меткой с использованием библиотеки react-vis

У меня проблема. Серия бара не попадает прямо под его этикетку. Я не могу понять, что происходит не так.

введите здесь описание изображения

Вот код для этого

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
        }
      ]
    }

reactjs charts react-vis
person Gardezi    schedule 07.01.2020    source источник
comment
пожалуйста, прикрепите свой стиль   -  person Alex    schedule 07.01.2020
comment
Привет @Alex, я использую стили реакции. Я понял проблему. Это потому, что для каждого бара я визуализирую отдельную серию, которая вызывает проблему. Я исправил это, но из-за этого возникла другая проблема, а именно: теперь я не могу отображать каждую полосу разным цветом. Любая идея о том, как я могу этого добиться   -  person Gardezi    schedule 07.01.2020
comment
Я пытаюсь воспроизвести вашу проблему, у вас есть песочница?   -  person Alex    schedule 07.01.2020
comment
@Alex - это URL-адрес codesandbox.io/s/   -  person Gardezi    schedule 07.01.2020
comment
@Alex, спасибо, что уделили время. Я понял это   -  person Gardezi    schedule 07.01.2020

Ответы (1)


arrow_upward
3
arrow_downward

Я понял.

Для каждого бара я создавал отдельную серию. Мне просто нужно было передать все данные в одну серию. Теперь, если кто-то хочет, чтобы каждая полоса имела другой цвет в одной серии, он может передать цвет с данными, как показано ниже.

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

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

и нам нужно передать colorType="literal" в саму серию.

person Gardezi    schedule 07.01.2020
comment
Именно так! github.com/uber/react-vis/blob/ master / docs / colors.md - person Alex; 07.01.2020