I am doing react native application. In that, I am trying to showing bar chart. So, I am using Fusion Chart
, It is mandatory to use this library in my application. So, I followed this library installation and it was successful. But, Data is not showing at all.
No Data to display showing in screen.
My code is
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>
);
}
}
I have customised this for design. Can anyone tell me, Where I am doing wrong?
确保您有正确的 fusioncharts.html 路径,并在 script 标签中的 package.js 下运行此命令 "build:assets": "fc-build-assets --fc-template ./src/assets/fusioncharts-tpl.html ”
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.