我试图让这个折线图正确缩放,但我无法让 YAxis 与 LineChart 上的刻度对齐。我花了几天时间研究这个,我能找到的唯一信息是我需要确保 numberOfTicks 道具在 YAxis 组件和 LineChart 组件之间对齐。它是从 var 接收的,所以它的值绝对相同。如果您需要更多信息,我会尽我所能通过更新这篇文章将其提供给您。
无论传递什么值,都在折线图上呈现 10 个刻度,yAxis 正确呈现
更新:5 滴答及以下会改变滴答的数量,但任何高于 10 的滴答声都不会改变
这显示了黑色的刻度以及 Y 轴
笔记:
使用 Var 保存 numOfTicks
使用世博会
包裹:
- 反应原生 svg 图表
代码:
<YAxis
data={yIndex}
contentInset={{ top: 10, bottom: 30 }}
svg={{
fill: "white",
fontSize: 10,
}}
formatLabel={(value) => `$${value}K-`}
numberOfTicks={numYIndex}
/>
<View style={{ width: "90%" }}>
<LineChart
style={{
flex: 1,
borderWidth: 1,
borderColor: "white",
borderTopWidth: 0,
borderRightWidth: 0
}}
data={this.state.data}
contentInset={{ top: 10, bottom: 30 }}
numberOfTicks={numYIndex}
gridMin={0}
>
<Grid />
{/* {this.state.data.map((dataPoint, index) => {
return <Tooltip index={index} />;
})} */}
</LineChart>
<XAxis
style={{
width: "100%",
borderTopWidth: 1,
borderColor: "white",
}}
data={this.state.keys}
formatLabel={(value, index) => value}
contentInset={{ left: 10, right: 10 }}
svg={{ fontSize: 10, fill: "white" }}
/>
</View>