微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

ReactNative Fusionchart 许可证配置不起作用

如何解决ReactNative Fusionchart 许可证配置不起作用

我尝试在 ReactNative 中配置 Fusionchart 的许可证,如此 URL https://www.npmjs.com/package/react-native-fusioncharts#license-configuration

但是,它仍然显示不应该可见的水印。有什么我错过的吗?

import React,{ Component } from 'react';
import { AppRegistry,StyleSheet,Text,View,Platform } from 'react-native';
import ReactNativeFusionCharts from 'react-native-fusioncharts';


global.licenseConfig = {
    key: "license-key",creditLabel: false // true/false to show/hide watermark respectively
};

export default class App extends Component {
    constructor(props) {
        super(props);
        //STEP 2 - Chart Data
        const chartData = [
            { label: 'Venezuela',value: '250' },{ label: 'Saudi',value: '260' },{ label: 'Canada',value: '180' },{ label: 'Iran',value: '140' },{ label: 'Russia',value: '115' },{ label: 'UAE',value: '100' },{ label: 'US',value: '30' },{ label: 'China',];
        //STEP 3 - Chart Configurations
        const chartConfig = {
            type: 'column2d',width: 400,height: 400,dataFormat: 'json',dataSource: {
                chart: {
                    caption: 'Countries With Most Oil Reserves [2017-18]',subCaption: 'In MMbbl = One Million barrels',xAxisName: 'Country',yAxisName: 'Reserves (MMbbl)',numberSuffix: 'K',theme: 'fusion',exportEnabled: 1,// to enable the export chart functionality
                },data: chartData,},};
        const events = {
            // Add your events method here:
            // Event name should be in small letters.
            dataPlotClick: (ev,props) => {
                console.log('dataPlotClick');
            },dataLabelClick: (ev,props) => {
                console.log('dataLabelClick');
            },};
        this.state = {
            chartConfig,events
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.heading}>FusionCharts Integration with React Native</Text>
                <View style={styles.chartContainer}>
                    <ReactNativeFusionCharts chartConfig={this.state.chartConfig} events={this.state.events} />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,paddingTop: 50,height: 500,backgroundColor: 'white'
    },heading: {
        fontSize: 20,textAlign: 'center',marginBottom: 10,chartContainer: {
        borderColor: 'red',borderWidth: 1,});

// skip this line if using Create React Native App
 AppRegistry.registerComponent('ReactNativeFusionCharts',() => App);

我还在根组件中添加了以下代码,但没有奏效。

global.licenseConfig = {
    key: "license-key",creditLabel: false // true/false to show/hide watermark respectively
};

解决方法

回答我自己的问题。希望这会对某人有所帮助。

问题是最新的 react-native-fusionchart 5.0.0 没有更新到 fusionchart 3.17.0。您可能需要手动将 fusionchart 内容复制到 react-native-fusionchart。

node_module/fusionchart 内容复制到 node_modules/react-native-fusioncharts/src/modules/fusionchart 文件夹并在脚本下方运行。

find fusioncharts -name "*.js" -exec sh -c 'mv "$0" "${0%.js}.fcscript"' {} \;

然后水印按预期消失。这些步骤是在 gulp 脚本中配置的,但不知何故似乎不起作用。

希望这个问题能尽快得到解决。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。