Переместить горизонтальную гистограмму Victory Native влево - PullRequest
Новая
       29

Переместить горизонтальную гистограмму Victory Native влево

0 голосов
/ 28 мая 2020

В моем приложении React Native мне нужно отображать гистограммы без оси. Однако все полосы смещены вправо, как если бы отображалась ось, из-за которой экран выглядел несбалансированным. Вот как сейчас выглядит мой экран:

enter image description here

Я хочу перетащить все эти гистограммы влево, чтобы они были выровнены по своим меткам . Кажется, не могу понять, как выполнить такую ​​простую операцию. Я пробовал поиграть с padding, domainPadding и всем остальным, но безрезультатно. Вот как сейчас выглядит мой код: 

const MyChart = () => (
  <VictoryGroup
    domainPadding={{ x: 30, y: 0 }}
    theme={VictoryTheme.material}
    domain={{ y: [0, 110] }}
  >
    <VictoryStack>
      {dataSet.map((data, index) => (
          <VictoryBar
            horizontal
            key={index}
            data={data}
            domainPadding={{ x: 0, y: 30 }}
            labels={d => 'Test Bar'}}
            labelComponent={<VictoryLabel dy={-40} x={0} />}
          />
        )
      )}
    </VictoryStack>
  </VictoryGroup>
)

1 Ответ

1 голос
/ 29 мая 2020

Мой коллега понял это, и я подумал, что могу опубликовать решение на случай, если кто-то наткнется на это с той же проблемой.

Ранее заданное заполнение было на VictoryGroup, и вы можете Не меняйте его, используя свойство style, и это необходимо делать через свойство padding, которое я упустил из виду в документации.

Итак, в основном урок, взятый здесь, был следующим:

1 неправильное место для заполнения (я сосредоточился на VictoryBar)

2- Не используйте опору style и используйте опору padding.

В основном для данного примера в исходном посте решение проблемы будет следующим: 

const MyChart = () => (
  <VictoryGroup
    domainPadding={{ x: 30, y: 0 }}
    theme={VictoryTheme.material}
    domain={{ y: [0, 110] }}
    padding={{ top: 30, right: 100, bottom: 30, left: 0 }}
  >
    <VictoryStack>
      {dataSet.map((data, index) => (
          <VictoryBar
            horizontal
            key={index}
            data={data}
            domainPadding={{ x: 0, y: 30 }}
            labels={d => 'Test Bar'}}
            labelComponent={<VictoryLabel dy={-40} x={0} />}
          />
        )
      )}
    </VictoryStack>
  </VictoryGroup>
)
...