Передача значений в функцию tickFormatter в Recharts BarChart

Я пытаюсь построить даты в диаграмме BarChart, для чего требуется преобразовать временные метки в соответствующие значения Unix Epoch (т.е. секунды с 1 января 1970 года). Это означает, что любые даты до 1970 г. отображаются как отрицательные числа.

Изначально я думал, что нужно иметь функцию, которая сначала находит самую раннюю дату (самый низкий номер эпохи), а затем использует ее для установки новой базы для моей диаграммы BarChart. Это фактически проигнорирует 1970 и соответственно дополнит даты.

К сожалению, свойство tickFormatter Recharts в <XAxis /> и <YAxis />, кажется, принимает только функции, причем value неявно вызывается, когда форматтер выполняет свою работу.

Это похоже на то, что я хотел бы сделать, а затем отформатировать в соответствии с «наименьшим числом», присвоенным функции removeEpochBuffer. Это должно рассматривать параметр как номер буфера, который нужно отделить от предоставленного номера на графике, а затем вернуть исходный (правильный) номер эпохи, который можно переформатировать как YYYY-MM-DD.

            <YAxis
              name={getYAxisLabel(yAxisFields, CHART_TYPES.COLUMNCHART)}
              domain={['auto', 'auto']}
              tickFormatter={removeEpochBuffer(lowestNumbers[0])}
              allowDataOverflow={false}
            />

Это похоже на то, что у меня есть сейчас, основываясь на том, что я видел на GitHub:

            <YAxis
              name={getYAxisLabel(yAxisFields, CHART_TYPES.COLUMNCHART)}
              domain={['auto', 'auto']}
              tickFormatter={customFormatter}
              allowDataOverflow={false}
            />

Возможно ли это даже с Recharts?


reactjs d3.js recharts
person Torc    schedule 02.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Некоторое время я грызла эту ту же проблему, и я придумал обходной путь, который выполняет свою работу. Мой график имеет тик только в первый торговый день недели, месяца и т. Д. То, что я сделал, было вычислением массива тиков, который я хотел, прежде чем рендеринг диаграммы. xAxis выглядел так:

Ось X

Передача этого массива в качестве опоры компоненту тиков означает, что он будет отображаться вложенным в реквизиты, которые также будут получать тиковые данные каждый раз при рендеринге. Хорошее начало, но на самом деле вам нужно визуализировать КАЖДЫЙ тик, а затем фильтровать внутри, потому что повторные диаграммы будут отображать это только на основе заранее определенных тиков. Мне пришлось установить интервал на ноль и управлять каждым тиком, иначе это не сработало. Не мог понять, как взломать этот расчет.

Мой тиковый компонент основан на том, что есть в примерах API, с добавленной уловкой.

Компонент галочки

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

person Jacob    schedule 01.07.2020
comment
Если вы уменьшите непрозрачность сетки, она действительно выглядит нормально, тем более что сетка чувствительна к цвету. Вы можете сделать сетку почти невидимой, выделив активные элементы. - person Jacob; 01.07.2020
comment
На данный момент лучший вариант с сеткой - это установка логического значения для отключения вертикальных линий сетки в ‹CartesianGrid /› props над определенным количеством точек данных. Это и исходное решение дают вам настраиваемую ось даты. Вы можете настроить входной массив тиков по своему усмотрению. - person Jacob; 01.07.2020