Диаграмма победы - сокращение по оси X, выбор диапазона и предотвращение наложения - PullRequest
1 голос
/ 27 марта 2019

Используя Диаграмму Победы, я создал простой BarChart.В X-Axis у меня большое число от 500 000 до 3 000 000.Поскольку диаграмма очень узкая, цифры на оси X перекрываются.Мой код выглядит следующим образом:

   <VictoryChart>
      theme={VictoryTheme.material}
      <VictoryGroup
        height={chartHeight}
        offset={10}>
        <VictoryBar
          horizontal
          data={chart2}
          labels={d => d.y}
          labelComponent={<VictoryLabel dy={10} />}
        />
        <VictoryBar horizontal data={chart1} />
      </VictoryGroup>
    </VictoryChart>
  1. Я хочу, чтобы метки оси X были такими: 500,000 -> 500K.
  2. Кроме того, на оси X я бынравится иметь только 4-5 этикеток, которые всегда равномерно распределяются, например 0, 1000К, 2000К, 3000К, 4000К.Если у меня есть данные по оси x, идущей к 1000K, разделение будет 0, 250K, 500K, 750K, 1000K.

enter image description here

Ответы [ 2 ]

0 голосов
/ 20 июня 2019

Также есть опора fixLabelOverlap, которую вы можете передать на ось.

По умолчанию установлено false.

https://formidable.com/open-source/victory/docs/victory-axis#fixlabeloverlap

0 голосов
/ 31 мая 2019

Просто добавьте Padding в группу

https://formidable.com/open-source/victory/guides/layout

style={{
                data: { width: 3 },
                labels: { padding: -20 }
              }}
...