Как избежать дублирования дат по оси x в диаграмме победы

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

<VictoryAxis
        // main axis styles
        scale={{x: 'time'}}
        style={{
            tickLabels: {
                fontSize: 12,
                fontFamily: 'Nunito',
                fontWeight: 'bold',
            },
        }}
        tickCount={6}
        // define the format of the main axis dates
        tickFormat={(x) => {
            const dateObj = new Date(x);
            const year = dateObj.getFullYear().toString().substr(-2);
            const month = dateObj.toLocaleString('fr-fr', { month: '2-digit' });
            return `${month}/${year}`;
        }}
       fixLabelOverlap={true}
    />

Данные определяются следующим образом:

<VictoryLine
        interpolation="monotoneX"
        labelComponent={(
        <VictoryTooltip
            style={{
                fontSize: 10,
                fontWeight: 'bold',
            }}
            flyoutStyle={{
                stroke: 'tomato',
                strokeWidth: 0,
                fill: '#f87268',
            }}
        />
        )}
        style={{
            data: { stroke: '#f87268' },
            parent: {
                border: '1px solid #ccc',
                fontFamily: 'Nunito',
            },
        }}
        domain={{
            y: [0, 10]
        }}
        data={petWeight.map((item) => {
            if (item.weightDate && item.weightValue) {
                return { x: new Date(item.weightDate), y: item.weightValue };
            }
        })}
        animate={{
            duration: 1500,
            onLoad: { duration: 1000 },
        }}
    />

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

Я хочу удалить дубликаты дат по оси x, я прочитал документацию, но не смог найти решение. Как я могу это сделать ?


person SevB    schedule 15.12.2020    source источник


Ответы (1)


Я думаю, что вы должны нести ответственность за обработку случая дублирования даты, а не за саму библиотеку. Один пример подхода состоит в том, чтобы объединить значения, которые имеют один и тот же weightDate, вычислить их среднее значение weightValue для отображения.

person Viet    schedule 15.12.2020
comment
Это странно, потому что, если я просто добавлю элемент, дубликатов больше не будет, только 4 даты в качестве значений тика: o - person SevB; 15.12.2020
comment
И у меня нет дубликатов в моих данных, всего 2 даты 07.06.2015 и 09.08.2015, так почему у меня есть 15.07 дважды и 15.08 три раза в моих значениях тика? - person SevB; 15.12.2020
comment
Затем вы должны предоставить рабочий образец с данными (petWeight), чтобы я мог вам помочь :) - person Viet; 16.12.2020
comment
Хорошо, это график после добавления нового элемента: !график Вы можете увидеть добавленный элемент под графиком, и даты по оси X в порядке. - person SevB; 16.12.2020