胜利图 - 值未正确对齐答案

【问题标题】：Victory charts - values are not aligned properly胜利图 - 值未正确对齐
【发布时间】：2021-12-16 08:25:48
【问题描述】：

我正在使用胜利聊天来显示基于时间的折线图。还使用散点图来显示点。

由于我在按行时没有收到事件，所以我最终使用了散点图。

在此示例中，您可以看到值正确对齐 x 轴图表线在星期六 30 停止。但实际的结局应该在周日 31 日

有什么方法可以使数据与此实现对齐或者请建议另一种方式。

    const points = [24, 24, 23, 23, 22, 20, 21, 21, 21, 20, 22, 19, 19, 20];
const dateList = [
    '2021-10-18',
    '2021-10-19',
    '2021-10-20',
    '2021-10-21',
    '2021-10-22',
    '2021-10-23',
    '2021-10-24',
    '2021-10-25',
    '2021-10-26',
    '2021-10-27',
    '2021-10-28',
    '2021-10-29',
    '2021-10-30',
    '2021-10-31',
];

const DataDots = (props) => {
    const { x, y, datum } = props;

    const dotStat = getGraphPointStats(datum?._y);
    const onPressDots = () => {
        const { _x, _y } = props?.datum;
        setDeviationInfo({ index: _x, value: _y });
    };
    return (
        <TextSVG x={x} y={y} fontSize={30} onPressIn={onPressDots}>
            <Circle cx={x} cy={y} fill={dotStat?.color} r={6} />
        </TextSVG>
    );
};

return (
    <VictoryChart>
        <VictoryLine name="line" interpolation="natural" data={points} />
        <VictoryScatter name="points" data={points} size={2} dataComponent={<DataDots />} />
        <VictoryAxis
            scale="time"
            tickValues={dateList}
            tickFormat={(date) => {
                return `${moment(date).format('ddd')}\n ${moment(date).format('DD')}`;
            }}
        />
    </VictoryChart>
);

【问题讨论】：

标签： react-native graph react-native-svg victory-charts victory-native

【解决方案1】：

我已经解决了问题数据应该这样格式化

[{x:new Date(),y:value}]

【讨论】：