如何在react native中获得融合图中实体的点击?

uemypmqf  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(115)

如何实现实体点击事件在印图图中的融合图。
它可以在react.js web https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-events#event-entityClick上找到

<FusionCharts
type={configJSON.chartMapIndia}
width={configJSON.chartDefaultWidth}
height={this.state.heightState}
dataFormat={configJSON.chartDataFormat}
dataSource={this.state.dataSourceMarket}
libraryPath={{ uri: "file:///android_asset/fusioncharts.html" }}
/>

字符串
这是dataSourceMarket的示例
样本:http://jsfiddle.net/9fxtzh5n/5/

ndasle7k

ndasle7k1#

你可以尝试下面的代码-

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

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

    const chartConfig = {
      type: 'column2d',
      width: '100%',
      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'
        },
        data: [
          { label: 'Venezuela', value: '290' },
          { 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', value: '30' }
        ]
      }
    };
    this.state = {
      chartConfig,
      events: {
        // Add your events method here:
        // Event name should be in small letters.
        dataplotclick: (e, a) => {
          Alert.alert(`You clicked on ${e.data.categoryLabel}`);
        }
      }
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.header}>Listen to events from chart</Text>
        <View style={styles.chartContainer}>
          <ReactNativeFusionCharts
            chartConfig={this.state.chartConfig}
            events={this.state.events}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10
  },
  header: {
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
    paddingBottom: 10
  },
  chartContainer: {
    height: 400,
    borderColor: '#000',
    borderWidth: 1
  }
})

字符串
欲了解更多详情请refer
DemoJsFiddle

相关问题