反应新的 - 新的kit-kit最小值和最大值

问题描述 投票:0回答:4

我真的很喜欢整洁的反应 - 新曲 - 但是我对显示数据的方式有疑问。

它将数据中的最低点作为底部和最高点作为顶部。从零开始可以从零开始,但是如果我想从5开始呢?顶部相同,如果我想显示5至90的范围怎么办?

我想知道是否有人对这张图有更多的了解或使用其他可以做这些事情的东西? thanks

enter image description here addd额外的数据集,每个数据集每个值一个值(您要显示的最小值和最大值)

reactjs react-native jsx react-native-chart-kit
4个回答
9
投票

I添加了一个具有一个值的新数据集,这是我希望它在图表上显示的高度值,我给它一个属性
withDots: false

5
投票
我使用的代码是...

datasets: [
        {
          data: [20, 50, 79], // my graph data
        },
        {
          data: [200], //highest graph value
          withDots: false, //a flage to make it hidden
        },
      ],

解决方法是做以下事情:


2
投票
fromZero

道;

    使用代表您的自定义y轴标签值的
  • 伴侣函数;
    通过标签生成器函数给
  • formatYLabel
  • prop;的结果; 调整您的数据:从数据集中的每个数字中减去所需的最小标签值。
  • 上面给出的方法示例:
    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

段,但要使中间标签为空字符串。

a的警告总体上是您的数据阵列中无法具有高于最大标签值的值。
    
i我能够使用
1
和min,最大为数据集来完成此操作。您可以具有回调函数来渲染点,索引和数据值在此函数中返回,并且可以检查原始数据集中是否存在该值。因为原始数据集中的最小值和最大值永远不会存在,因此返回-1,您可以使用该逻辑使这些点透明。

示例:

3

    
GetDotProps= {(datapoint,index)=> {
返回 {
R:“ 6”,
中风:“ 2”,
中风:
ChartData.indexof(index)== -1
? 

2
//使其透明 : '红色的', 充满: ChartData.indexof(index)== -1 ?

getDotProps//使其透明 : '红色的', }; }}我们可以通过或将其他任何道具从控制


0
投票
最新问题
© www.soinside.com 2019 - 2025. All rights reserved.