Блог

Snack Я создал гистограмму в react native, которая позволяет пользователям выбирать месяцы, и диаграмма отображается в соответствии с их выбором. Однако то, что я сделал до сих пор, — это только изменение меток месяцев на оси x. У меня возникли проблемы с реализацией выбора пользователя на самой гистограмме. Смотрите ниже — Способ определения переменных datasets соответствует тому, как это было в официальной документации. Цвета должны быть определены для каждой линейки. Я думаю, что если каким-то образом туда можно включить цикл for, в зависимости от количества меток, возможно, сработает фильтр месяцев. Я использую applyDateFilter() для настройки меток на диаграмме.

 import {Chart,LineChart,BarChart,PieChart,ProgressChart,ContributionGraph} from 'react-native-chart-kit'
import React, { Component } from 'react';
import {useState, useEffect, useCallback} from 'react';
import { View, Text, StyleSheet, ImageBackground, Icon, FlatList, Button, TextInput, Dimensions, SafeAreaView, Picker, Alert } from 'react-native';

const initialData = [12, 19, 12, 25, 22, 10];
const initialFrom = "0"
const initialToMonth = "7"
const months = [
      { month: "Jan", value: "0" },
      { month: "Feb", value: "1" },
      { month: "Mar", value: "2" },
      { month: "April", value: "3" },
      { month: "May", value: "4" },
      { month: "June", value: "5" },
    ];
const initialLevelsArr = [
          "Jan",
          "Feb",
          "Mar",
          "April",
          "May",
          "June",
        ];
const initialLabels = ["Jan", "Feb", "Mar", "April", "May", "June"];

export default function FocusScreen() {

const [datas, setDatas] = useState(initialData);
const [from, setFrom] = useState(initialFrom);
const [toMonth, setToMonth] = useState(initialToMonth);
const [labels, setLabels] = useState(initialLabels);

const applyDateFilter = () => {
    const newLabels = initialLevelsArr.slice(
      parseInt(from),
      parseInt(toMonth)   1
    );
    setLabels(newLabels);
    console.log(labels)
  }

const dataset = {
    labels: labels,
    datasets: [
      {
        data: datas,
        colors: [
          (opacity = 1) => `red`,
          (opacity = 1) => `blue`,
          (opacity = 1) => `yellow`,
          (opacity = 1) => `green`,
          (opacity = 1) => `purple`,
          (opacity = 1) => `orange`
        ]
      }
    ]
  }

return (
      <SafeAreaView style={styles.chartContainer}>
      <BarChart
              data={dataset}
              width={300}
              height={220}
              withCustomBarColorFromData={true}
              flatColor={true}
              chartConfig={{
                backgroundColor: '#ffffff',
                backgroundGradientFrom: '#ffffff',
                backgroundGradientTo: '#ffffff',
                data: dataset.datasets,
                color: (opacity = 1) => '#fff',
                labelColor: () => '#6a6a6a',
              }}
            />
      <View style={styles.wrapper}>
            <View>
            <Button
              onPress={() => applyDateFilter()}
              title = "Apply DateFilter"
              color="#841584"
                />
                <View style={{flexDirection:"row"}}>
                    <View style={{flex:1}}>
                        <Picker
                          selectedValue={from}
                          style={{ height: 50, width: 150, justifyContent: 'flex-start' }}
                          onValueChange={(itemValue, itemIndex) => setFrom(itemValue)}
                        >
                          <Picker.Item label ="Jan" value="0" />
                          <Picker.Item label="Feb" value="1" />
                          <Picker.Item label ="Mar" value="2" />
                          <Picker.Item label="Apr" value="3" />
                          <Picker.Item label ="May" value="4" />
                          <Picker.Item label="Jun" value="5" />
                        </Picker>
                    </View>
                    <View style={{flex:1}}>
                    <Picker
                      selectedValue={toMonth}
                      style={{ height: 50, width: 150, justifyContent: 'flex-start' }}
                      onValueChange={(itemValue, itemIndex) => setToMonth(itemValue)}
                    >
                      <Picker.Item label ="Jan" value="0" />
                      <Picker.Item label="Feb" value="1" />
                      <Picker.Item label ="Mar" value="2" />
                      <Picker.Item label="Apr" value="3" />
                      <Picker.Item label ="May" value="4" />
                      <Picker.Item label="Jun" value="5" />
                    </Picker>
                    </View>
                </View>
            </View>

        </View>
    </SafeAreaView>
);
} 
 

Попробуйте это:

 const applyDateFilter = () => {
    const newLabels = initialLevelsArr.slice(
      parseInt(from),
      parseInt(toMonth)   1
    );
    const newDatas = initialData.slice(
      parseInt(from),
      parseInt(toMonth)   1
    );

    setLabels(newLabels);
    setDatas(newDatas);
  }
 

Таким образом, фильтр будет применяться и к данным, а не только к меткам.