如何解决react-native-chart-kit 最小值和最大值
我真的很喜欢 react-native-chart-kit 是多么简洁,但是我在它如何显示数据方面遇到了问题。
它使用数据中的最低点作为底部,最高点作为顶部。有一个从零开始的选项,但是如果我想从 5 开始呢?顶部也一样,如果我想显示 5 到 90 的范围怎么办?
我想知道是否有人更了解这个图表或使用过其他可以做这些事情的东西?
谢谢
解决方法
解决方法是执行以下操作:
- 在图表上使用
fromZero
道具; - 使用 generator 函数来表示您的自定义 y 轴标签值;
- 将标签生成器函数给出的结果传递给
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,${opacity})`,data: data.datasets,}}
formatYLabel={() => yLabelIterator.next().value}
/>
</View>
);
};
将数据集中每个元素的1
减去是因为当设置0
时fromZero
包含在范围内。
另请注意,图表中 segments
的数量在这里很重要。如果您想拥有 3
标签,您应该拥有 2
段。
具有 2
标签,如上例所示,是规则的例外。具有 2
标签和 1
段不起作用。示例中显示的解决方法是使用 3
标签和 2
段,但将中间标签设为空字符串。
对整个方法的一个警告是,数据数组中的值不能高于最大标签值。
,添加额外的数据集,每个数据集一个值(您要显示的最小值和最大值)
<LineChart
data={{
datasets: [
{
data: [3,4,6,7] // dataset
},{
data: [1] // min
},{
data: [10] // max
},}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。