我真的很喜欢react-native-chart-kit的整洁,但是我对它如何显示数据有问题。它使用的最低点在你的数据作为底部和最高的顶部.有一个选项从零开始,但如果我想从5开始?顶部相同,如果我想显示一个范围5到90?我想知道是否有人知道更多关于这个图或使用其他东西可以做这些事情?谢谢x1c 0d1x的数据
dddzy1tm1#
添加额外的数据集,每个数据集有一个值(您要显示的最小值和最大值)
<LineChart data={{ datasets: [ { data: [3, 4, 5, 6, 7] // dataset }, { data: [1] // min }, { data: [10] // max }, ], }} />
字符串
rsl1atfo2#
我添加了一个新的数据集,其中一个值是我希望它显示在图形上的高度值,我给予它一个属性withDots: false来隐藏点,现在它工作得很好。这是我使用的代码…
withDots: false
datasets: [ { data: [20, 50, 79], // my graph data }, { data: [200], //highest graph value withDots: false, //a flage to make it hidden }, ],
6gpjuf903#
解决方法是执行以下操作:
fromZero
formatYLabel
上面给出的方法示例:
const minValue = 5; const maxValue = 90; function* yLabel() { yield* [minValue, '', maxValue]; } const d = [10, 5, 90, 30, 20, 10, 80]; const datapoints = d.map((datapoint) => datapoint - minValue - 1); const data = { labels: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'], datasets: [ { data: datapoints, }, ], }; const CustomChart = () => { const screenWidth = Dimensions.get('window').width; const yLabelIterator = yLabel(); return ( <View> <LineChart data={data} segments={2} width={screenWidth} height={220} bezier fromZero chartConfig={{ color: (opacity = 3) => `rgba(200, 255, 255, ${opacity})`, data: data.datasets, }} formatYLabel={() => yLabelIterator.next().value} /> </View> ); };
字符串减去数据集中每个元素的1是因为0在设置fromZero时包含在范围内。还要注意的是,图表的segments的数量在这里很重要。如果你想有3标签,你应该有2段。上面的例子中,有2标签是规则的例外。有2标签和1段不起作用。例子中显示的解决方法是有3标签和2段,但使中间的标签为空字符串。
1
0
segments
3
2
lskq00tm4#
我可以使用getDotProps和min,max作为数据集来实现这一点。你可以使用一个回调函数来渲染点,索引和数据值在这个函数中返回,你可以检查该值是否存在于原始数据集中。因为min和max值永远不会存在于原始数据集中,因此返回-1,你可以使用该逻辑使这些点透明。范例:
getDotProps
const chartData = [60, 62, 70, 73, 80]; <LineChart data={{ datasets: [ { data: chartData, }, { data: [50], }, { data: [100], }, ], }} getDotProps={(dataPoint, index) => { return { r: "6", strokeWidth: "2", stroke: chartData.indexOf(index) == -1 ? `rgba(0, 0, 0, 0)` // make it transparent : 'red', fill: chartData.indexOf(index) == -1 ? `rgba(0, 0, 0, 0)` // make it transparent : 'red', }; }} ...... ...... </LineChart>
6gpjuf905#
<BarChart fromNumber={80} fromZero data={data} width={Dimensions.get(“window”).width - 30} // from react-native height={220} yAxisLabel="”yAxisSuffix=“K”chartConfig={chartConfig} style={{ marginVertical:8,borderRadius:16,}} />
5条答案
按热度按时间dddzy1tm1#
添加额外的数据集,每个数据集有一个值(您要显示的最小值和最大值)
字符串
rsl1atfo2#
我添加了一个新的数据集,其中一个值是我希望它显示在图形上的高度值,我给予它一个属性
withDots: false
来隐藏点,现在它工作得很好。这是我使用的代码…
字符串
6gpjuf903#
解决方法是执行以下操作:
fromZero
prop ;formatYLabel
属性;上面给出的方法示例:
字符串
减去数据集中每个元素的
1
是因为0
在设置fromZero
时包含在范围内。还要注意的是,图表的
segments
的数量在这里很重要。如果你想有3
标签,你应该有2
段。上面的例子中,有
2
标签是规则的例外。有2
标签和1
段不起作用。例子中显示的解决方法是有3
标签和2
段,但使中间的标签为空字符串。lskq00tm4#
我可以使用
getDotProps
和min,max作为数据集来实现这一点。你可以使用一个回调函数来渲染点,索引和数据值在这个函数中返回,你可以检查该值是否存在于原始数据集中。因为min和max值永远不会存在于原始数据集中,因此返回-1,你可以使用该逻辑使这些点透明。范例:
字符串
6gpjuf905#
<BarChart fromNumber={80} fromZero data={data} width={Dimensions.get(“window”).width - 30} // from react-native height={220} yAxisLabel="”yAxisSuffix=“K”chartConfig={chartConfig} style={{ marginVertical:8,borderRadius:16,}} />