react-native - 胜利图 - 值未正确对齐
问题描述
我正在使用胜利聊天来显示基于时间的折线图。还使用散点图来显示点。
因为当我按下线条时我没有得到事件,所以我最终使用了散点图。
在此示例中,您可以看到值正确对齐 x 轴,图表线在星期六 30 停止。但实际结束时间应该是 Sunday-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>
);
解决方案
我发现问题数据应该像这样格式化
[{x:new Date(),y:value}]
推荐阅读
- ios - 如果用户在应用程序启动时尝试刷新集合视图,则 swift 应用程序崩溃
- typescript - Typescript - 共享方法但不是从共享基类派生的类
- java - 为什么“gradle dependencies”不显示所有依赖项?
- javascript - 在 Javascript 中比较完整日历中的日期
- wordpress - Loading SDK Paypal 怎么做呢?
- r - 在R中的时间变量中替换NA
- php - 从 php 获取来自 dynamix ax xml 的数据
- c# - 在asp.net core razor页面中使用IsPost在表单提交后显示文本
- javascript - Date.now() 返回 11 秒的时间。如何?
- google-drive-api - Google Drive UI 集成,提交失败