Расстояние и размер турников в стеке Победы? - PullRequest
Новая
       18

Расстояние и размер турников в стеке Победы?

0 голосов
/ 11 декабря 2018

У меня есть простая горизонтальная гистограмма из трех частей, например:

enter image description here

Вы можете проверить это на CodeSandbox илипопробуйте код: 

function App() {
  return (
    <VictoryStack colorScale={['#D0021B', '#F5A623', '#00C16F']}>
      <VictoryBar horizontal data={[{ x: 'progress', y: 50 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
    </VictoryStack>
  )
}

У меня проблемы с 2-мя частями:

  1. Как я могу сделать высоту этих 3 баров выше (технически я предполагаю ширину, потому что ясделал это горизонтально)?
  2. Как добавить немного промежутка между каждой полосой?Имея в виду 2px пробела между красной, оранжевой и зеленой полосами.

Я пробовал кучу вещей, глядя на VictoryStack документы и VictoryBar диаграммы, но у меня нетне смог заставить его работать.Любая помощь будет оценена, спасибо!

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Вот рабочее решение с отсечкой:

barWidth подпорки для высоты стержня

a style опора добавлена ​​для того, чтобы смоделировать запас сграницы

https://codesandbox.io/s/7y2ym084o6

import React from "react";
import ReactDOM from "react-dom";
import { VictoryStack, VictoryBar } from "victory";

function App() {
  return (
    <VictoryStack
      style={{
        data: {
          stroke: "rgba(255,255,255,1)",
          strokeWidth: 2
        }
      }}
      colorScale={["#D0021B", "#F5A623", "#00C16F"]}
    >
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 50 }]} />
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 25 }]} />
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 25 }]} />
    </VictoryStack>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
0 голосов
/ 13 декабря 2018
  1. Вы можете использовать свойство barWidth для установки ширины стержней следующим образом: <VictoryBar horizontal barWidth={30} data={[{ x: 'progress', y: 50 }]} /> Или есть еще один путь через style: <VictoryBar horizontal style={ { data: { width:30 } } } data={[{ x: 'progress', y: 25 }]} />
  2. Для создания пробеловмежду барами, попробуйте поиграть со свойством y0, как здесь: <VictoryBar horizontal data={[{ x: 'progress', y: 25, y0: 77 }]} />

Чтобы изобразить все решение, вот ваша слегка улучшенная Песочница .

...