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

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

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

Вы можете проверить это на 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>
  )
}

У меня проблемы с двумя частями:

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

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


reactjs javascript svg charts victory-charts
person Saad    schedule 11.12.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

person Oleg Safarov    schedule 13.12.2018
comment
Большое спасибо, ответил на все, что мне было нужно. :) Награду через день, так как мне нужно ждать 24 часа. - person Saad; 13.12.2018

arrow_upward
3
arrow_downward

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

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

добавлена ​​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);

person Mosè Raguzzini    schedule 14.12.2018

arrow_upward
1
arrow_downward

Вы можете использовать другие предлагаемые здесь решения, используя свойства barWidth и / или style.

Однако я считаю, что жесткое кодирование barWidth не является хорошей идеей по двум причинам. Во-первых, barWidth должен реагировать на размер дисплея устройства, которое вы используете для просмотра диаграммы. Во-вторых, по мере того, как ваша диаграмма становится более сложной, у вас может быть переменное количество VictoryBars.

Я думаю, что есть более элегантное решение: опора barRatio. Это будет динамически устанавливать barWidth относительно доступного пространства между полосами, как описано в здесь.

Если вы хотите заполнить все пространство и сделать полосы как можно шире, имеет смысл использовать barRatio, равный 1, например:

 <VictoryBar data={data} key={outcome} barRatio={1} alignment="start" />
person achill    schedule 17.11.2019