我正在做反应本机应用程序。在那里,我试图显示条形图。所以,我正在使用
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>
);
}
}
我已经定制了这个设计。 谁能告诉我,我哪里做错了?
确保 fusioncharts.html 的路径正确 并在 script 标签中的 package.js 下运行此命令 “构建:资产”:“fc-build-assets --fc-template ./src/assets/fusioncharts-tpl.html”
确保您已将 .fcscript 添加到资产扩展部分。
这是代码-
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
}
})
要了解更多信息,请参阅 - https://www.fusioncharts.com/dev/getting-started/react-native/your-first-chart-using-react-native