I'm using victory chat to display line graphs on the basis of time. Also using Scatter plots to display points.
Since I did not get events when I pressed in lines I ended up using scatter plots.
In this example, you can see the values are aligned correctly x-axis the graph line stopped on Saturday-30. But the actual end should be on Sunday-31
Is there any way i can align the data with this implementation or please suggest an alternate way.
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>
);
我发现问题数据的格式应该是这样的
[{x:new Date(),y:value}]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.