如何使用带有react native的react-google-charts渲染甘特图? [英] How to render gantt chart using react-google-charts with react native?

问题描述

这是我当前的软件包版本

This my current version of packages

react-google-charts 1.5.5
react 16.0.0-beta.5
react-native https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz

现在我正在尝试渲染甘特图(可以在这里)

Now I am trying to render a Gantt Chart (example can be found here and here)

下面是我当前的代码

import React, { Component } from 'react';
import { View, ScrollView, Text } from 'react-native';
import { Card, Avatar } from 'react-native-elements';
import { Chart } from 'react-google-charts';

class ScheduleScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            rows: [
                ['Research', 'Find sources', new Date(2015, 1, 1, 8, 0, 0), new Date(2015, 1, 5, 8, 0, 0), null, 100, null],
                ['Write', 'Write paper', null, new Date(2015, 1, 9, 12, 0, 0), 259200000, 25, 'Research,Outline'],
                ['Cite', 'Create bibliography', null, new Date(2015, 1, 7, 8, 0, 0), 86400000, 20, 'Research'],
                ['Complete', 'Hand in paper', null, new Date(2015, 1, 10, 8, 0, 0), 86400000, 0, 'Cite,Write'],
                ['Outline', 'Outline paper', null, new Date(2015, 1, 6, 8, 0, 0), 86400000, 100, 'Research'],
        ],

            columns: [
                {
                    id: 'Task ID',
                    type: 'string',
                },
                {
                    id: 'Task Name',
                    type: 'string',
                },
                {
                    id: 'Start Date',
                    type: 'date',
                },
                {
                    id: 'End Date',
                    type: 'date',
                },
                {
                    id: 'Duration',
                    type: 'number',
                },
                {
                    id: 'Percent Complete',
                    type: 'number',
                },
                {
                    id: 'Dependencies',
                    type: 'string',
                },
            ],
        };
    }

    onButtonPressClose = () => {
        this.props.navigation.navigate('Home');
    }

    render() {
        return (
            <View>
            <ScrollView>
                <Card title="Schedule">
                    <Chart
                        graph_id="ganttchart"
                        chartType="Gantt"
                        columns={this.state.columns}
                        rows={this.state.rows}
                        chartPackages={['gantt']}
                        width="100%" height="9999px"
                    />
                </Card>
            </ScrollView>
            <View style={styles.buttonBackContainer}>
            <Avatar
                medium
                rounded
                backgroundColor="#66ff33"
                icon={{ name: 'chevron-left' }}
                onPress={this.onButtonPressClose}
            />
            </View>
            </View>
        );
    }
}

const styles = {
    buttonBackContainer: {
        position: 'absolute',
        top: 20,
        left: 20,
        right: 20,
        flexDirection: 'row',
        justifyContent: 'flex-start'
    }
};

export default ScheduleScreen;

启动应用程序时遇到错误

I encountered an error whenever I started the app

错误

Body:
{"message":"TransformError: 
/Users/ling/workspace/chartapp/node_modules/react-google-
charts/lib/index.js:
[BABEL]/Users/ling/workspace/chartapp/node_modules/react-google-
charts/lib/index.js:Unknown 
option:/Users/ling/workspace/chartapp/node_modules/react-google-
charts/react/react.js.Children.Check out http://babeljs.io/docs/usage/options/
for more informations about options. \n\nA common cause of this error is the presence of a configuration options object without the corresponding preset name.
Example: \n\nInvalid: \n `presets: [{option: value}]}....

如何解决此错误?编写代码时，我看不到任何皮棉错误.

How should I troubleshoot this error? I don't see any lint error when writing the code.

感谢您的帮助和建议.

推荐答案

您发布的错误消息不断在react-google-charts中引用错误.

The error message you posted keeps referencing errors in react-google-charts.

我不认为它支持本机反应，只支持反应.我在某个人似乎也遇到过同样问题的github上发现了这个问题， will可以与本机反应吗?.另外react-google-charts npm页面也没有提到react-native.也许看看这个问题可以找到替代库.

I don't think it supports react-native, only react. I found this issue on there github where someone seems to have had the same issue, will this work with react native?. Also the react-google-charts npm page makes no mention of react-native. Maybe have a look at this question to find an alternative library.

这篇关于如何使用带有react native的react-google-charts渲染甘特图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！