Question

我正在对本机应用程序做出反应。在此，我试图显示条形图。因此，我正在使用Fusion Chart，在我的应用程序中必须使用此库。因此，我遵循了此库的安装，并成功完成了安装。但是，数据根本没有显示。

屏幕上没有要显示的数据。

我的代码是

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      type: 'bar2d',
      width: '100%',
      height: '100%',
      dataFormat: 'json',
      dataSource: {
        chart: {
            captionFontSize: '16',
            subcaptionFontSize: '14',
            showAlternatevGridColor: '0',
            numDivLines: '0',
            valueFontColor: '#ffffff',
            yAxisMinValue: '0',
            yAxisMaxValue: '100',
            showYAxisValues: '0',
            // "canvasBorderColor" : "#b3ffb3",
            canvasBgColor: '#ffffff,#e6eeff',
            canvasTopMargin: '100',
            paletteColors: '#990000',
            usePlotGradientColor: '1',
            plotGradientColor: '#ff8080',
            divLineAlpha: '0',
            plotSpacePercent: '60',
            useDataPlotColorForLabels: '1',
            showPercentInTooltip: '0',
            showLegend: '1',
            showLabels: '0',
            showValues: '0',
            placeValuesInside: '1',
            showBorder: '0'
          },
          data: [
            {
              label: 'Travel & Leisure',
              value: '41'
            },
            {
              label: 'Advertising/Marketing/PR',
              value: '39'
            },
            {
              label: 'Other',
              value: '38'
            },
            {
              label: 'Real Estate',
              value: '32'
            },
          ],
          annotations: {
            showBelow: '0',
            autoScale: '1',
            groups: [{
              id: 'user-images',
              items: [{
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Best when calm',
                x: '$canvasStartX+0',
                y: '$dataset.0.set.0.ENDY-0'
              }, {
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Very Relaxed',
                x: '$canvasStartX+00',
                y: '$dataset.0.set.1.ENDY-0'
              }, {
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Mellow',
                x: '$canvasStartX+00',
                y: '$dataset.0.set.2.ENDY-0'
              }, {
                id: 'dyn-label-bg',
                color: '#000000',
                align: 'left',
                type: 'text',
                text: 'Out of Control',
                x: '$canvasStartX+00',
                y: '$dataset.0.set.3.ENDY-0'
              }]
            }]
          }
    }

    };

    this.libraryPath = Platform.select({
      // Specify fusioncharts.html file location
      ios: require('./assets/fusioncharts.html'),
      //android: { uri: 'file:///android_asset/fusioncharts.html' },
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.heading}>
          FusionCharts Integration with React Native
        </Text>
        <View style={styles.chartContainer}>
          <FusionCharts
            type={this.state.type}
            width={this.state.width}
            height={this.state.height}
            dataFormat={this.state.dataFormat}
            dataSource={this.state.dataSource}
            libraryPath={this.libraryPath} // set the libraryPath property
          />
        </View>
      </View>
    );
  }
}

我已为此定制设计。谁能告诉我，我在哪里做错了？

Answer 1

确保您具有正确的Fusioncharts.html路径并在脚本标记中检查package.js运行此命令 “ build：assets”：“ fc-build-assets --fc-template ./src/assets/fusioncharts-tpl.html”

融合图表显示无数据可显示在React Native

1 个答案: