顯示無數據可在 React Native 中顯示的融合圖表

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 路徑，並在 script 標簽中的 package.js 下運行此命令 "build:assets": "fc-build-assets --fc-template ./src/assets/fusioncharts-tpl.html ”