Реагируйте на собственный гибкий макет с помощью VictoryChart, диаграмма соответствует родительскому контейнеру - PullRequest
Новая
       33

Реагируйте на собственный гибкий макет с помощью VictoryChart, диаграмма соответствует родительскому контейнеру

0 голосов
/ 15 декабря 2018

У меня есть следующая функция рендеринга: 

render() {
    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text> Header
                </Text>
            </View>
            <View style={styles.services}>
                <Text>Services</Text>
            </View>
            <View style={styles.chart}>

                <VictoryChart>
                    <VictoryLine
                        style={{
                            data: {stroke: "#c43a31"},
                            parent: {border: "1px solid #ccc"}
                        }}
                        data={[
                            {x: 1, y: 2},
                            {x: 2, y: 3},
                            {x: 3, y: 5},
                            {x: 4, y: 4},
                            {x: 5, y: 7}
                        ]}
                    />
                </VictoryChart>    
            </View>
        </View>
    );
}

У меня есть какая-то диаграмма в нижней части страницы, но я не могу заставить диаграмму заполнить ее родителя, она как бы переполняетсяспециальный раздел, Как я могу добиться этого? (Я пытался использовать flexWrap, но это не помогло!)

Вот предварительный просмотр того, как это выглядит сейчас: enter image description here

А вот моя таблица стилей для этого простого дизайна: 

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 1,
        backgroundColor: '#e7fe52'
    },

    services: {
        flex: 4,
        backgroundColor: '#20fe23'
    },

    chart: {
        flex: 2,
        flexWrap: 'wrap',
        backgroundColor: '#4fccb0'
    }
});

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

VictoryChart по умолчанию имеет высоту 300 и не адаптируется к родительской высоте.Таким образом, одним из способов решения этой проблемы будет удаление атрибута flex: 2 из стиля диаграммы и добавление вычисляемых вручную измерений.Примерно так: 

const chartHeight = Dimensions.get("window").height * 0.3;
const chartWidth = Dimensions.get("window").width;

<VictoryChart height={chartHeight} width={chartWidth} >
    <VictoryLine
        style={{
            data: {stroke: "#c43a31"},
            parent: {border: "1px solid #ccc"}
        }}
        data={[
            {x: 1, y: 2},
            {x: 2, y: 3},
            {x: 3, y: 5},
            {x: 4, y: 4},
            {x: 5, y: 7}
        ]}
    />
</VictoryChart>

// styles  
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 1,
        backgroundColor: '#e7fe52'
    },
    services: {
        flex: 4,
        backgroundColor: '#20fe23'
    },
    chart: {
        //remove flex from here
        backgroundColor: '#4fccb0'
    }
});

Хотя это и не идеально, но работает, но я бы установил минимальную высоту для графика.Я имею в виду, если доступное пространство слишком мало, оно не будет выглядеть красиво.В этом случае вы можете обернуть свой экран внутри ScrollView.

0 голосов
/ 16 декабря 2018

каждый гибкий контейнер - это одна гибкая попытка разделить ваш компонент на 1 

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 0.15,
        backgroundColor: '#e7fe52'
    },

    services: {
        flex: 0.5,
        backgroundColor: '#20fe23'
    },

    chart: {
        flex: 0.35,
        flexWrap: 'wrap',
        backgroundColor: '#4fccb0'
    }
});

0,15 + 0,5 + 0,35 = 1

...