Я разрабатываю приложение, которое позволяет пользователю выбирать динамически запрашиваемые данные, которые затем могут использоваться в визуализациях Recharts. Есть определенные крайние случаи, когда форматирование / рендеринг по умолчанию в повторных диаграммах дает ужасный результат. Например, если в компонент <XAxis /> передано много уникальных значений, то созданная диаграмма, вероятно, будет иметь перекрывающийся текст для отметок.
Кажется, нет хорошего рендера " галочки по возможности, не перекрывая « вариант, описанный в документации. Похоже, это единственные варианты:
- Визуализировать все тики (очевидно, приводит к слишком большому количеству тиков)
<XAxis
dataKey={xAxisField.name}
name={getXAxisLabel(xAxisField, chartType)}
tickFormatter={
getMetaDataType(xAxisField) ===
"DATE"
? tickEpochFormatter // force numbers to be displayed as 'YYYY-MM-DD'
: tickNumberFormatter
}
allowDataOverflow={false}
ticks={xValues.sort()} // gets all of the values
interval={0} // display all of values, instead of the default 5
angle={-90} // force text to be 90, reading towards the graph
textAnchor="end" // rather than setting "dy={50}" or something
>
Отрисовывать только начало / конец / начало и конец, которые (по-видимому) полностью зависят от ширины текста до поворота.
<XAxis
dataKey={xAxisField.name}
name={getXAxisLabel(xAxisField, chartType)}
tickFormatter={
getMetaDataType(xAxisField) ===
"DATE"
? tickEpochFormatter // force numbers to be displayed as 'YYYY-MM-DD'
: tickNumberFormatter
}
allowDataOverflow={false}
ticks={xValues.sort()} // gets all of the values
interval="preserveStart" // ensure that everything can be read, giving preference to the "left"???
angle={-90} // force text to be 90, reading towards the graph
textAnchor="end" // rather than setting "dy={50}" or something
>
Жестко запрограммировать количество интервалов, чтобы обеспечить максимум? Я не уверен, что это жизнеспособный вариант, так как мне нужно было бы знать, сколько тиков действительно перекрываются. Это кажется грубым подходом.
Возможно ли, чтобы Recharts отображали как можно больше объектов, даже если они повернуты на 90 градусов, а затем выборочно выбирали то, что имеет достаточно места для отображения? Возможно ли динамическое обновление свойства angle в зависимости от длины текста отметок?
Вот список ссылок, ни одна из которых, похоже, не отвечает на эти вопросы:
Recharts Docs
Github Recharts repo
Сообщения StackOverflow
Вот изображение проблемы c рендеринга, которое я хочу очистить:
Все тики отрисованы и перекрываются
Также обратите внимание, что обычно я предпочитаю придерживаться той же библиотеки, которую я использовал, но если другая библиотека лучше подходит для этого варианта использования, я хотел бы рассмотреть возможность переключения!