Реагировать на трудности стиля VictoryBar - PullRequest
Новая
       8

Реагировать на трудности стиля VictoryBar

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

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

Снимок экрана, расположенный здесь

Посмотрите на скриншот выше,синий прямоугольник, потому что он выделен в инструментах разработчика Chrome.

  • Области выделены красным в штучной упаковке.Я не понимаю, почему они там.Идя дальше, ничего не добавляя и не используя это пространство, как мне от него избавиться?
  • Как мне уменьшить размер шрифта до читабельного уровня?

Ниже показано, где я сейчас нахожусь 

    <VictoryChart
      theme={VictoryTheme.material}
      height={200}
      domainPadding={{ x: 20 }}
    >
      <VictoryBar
        barWidth={30}
        style={{
          data: { fill: f => f.fill }
        }}
        height={10}
        data={this.state.dataParsed}
      />
    </VictoryChart>

Я пытался редактировать тему материала напрямую, чтобы отрегулировать размер шрифта, но безрезультатно.Я также пытался создать свою собственную тему, но я не могу обдумать это ...

1 Ответ

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

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

        <VictoryChart
          padding={{ top: 20, bottom: 30, left: 40, right: 20 }}
          theme={VictoryTheme.material}
          height={120}
          domainPadding={{ x: 20 }}
        >
          <VictoryAxis
            style={{
              tickLabels: {
                fontSize: 7
              }
            }}
          />
          <VictoryAxis
            dependentAxis
            orientation="left"
            style={{ tickLabels: { fontSize: 10 } }}
          />
          <VictoryBar
            barWidth={30}
            style={{
              data: { fill: f => f.fill }
            }}
            data={this.state.dataParsed}
          />
        </VictoryChart>
...