├── .gitignore ├── .npmignore ├── BarChart.js ├── CandleStickChart.js ├── CombinedChart.js ├── HorizontalBarChart.js ├── LineChart.js ├── PieChart.js ├── README.md ├── RadarChart.js ├── android ├── build.gradle ├── libs │ └── mpandroidchartlibrary-2-2-4.jar ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── cn │ │ └── mandata │ │ └── react_native_mpchart │ │ └── ApplicationTest.java │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── cn │ │ │ └── mandata │ │ │ └── react_native_mpchart │ │ │ ├── ChartView.java │ │ │ ├── ChartViewManager.java │ │ │ ├── CustomYAxisValueFormatter.java │ │ │ ├── MPBarChartManager.java │ │ │ ├── MPBarLineChartManager.java │ │ │ ├── MPCandleStickChartManager.java │ │ │ ├── MPChartEventListener.java │ │ │ ├── MPChartPackage.java │ │ │ ├── MPChartSelectionEventListener.java │ │ │ ├── MPCombinedChartManager.java │ │ │ ├── MPHorizontalBarChartManager.java │ │ │ ├── MPLineChartManager.java │ │ │ ├── MPPieChartManager.java │ │ │ ├── MPPieChartSelectionEventListener.java │ │ │ ├── MPPieRadarChartManager.java │ │ │ ├── MPRadarChartManager.java │ │ │ ├── MainActivity.java │ │ │ └── PrintfValueFormatter.java │ └── res │ │ ├── layout │ │ ├── activity_main.xml │ │ └── content_main.xml │ │ ├── menu │ │ └── menu_main.xml │ │ ├── mipmap-hdpi │ │ └── ic_launcher.png │ │ ├── mipmap-mdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxhdpi │ │ └── ic_launcher.png │ │ ├── mipmap-xxxhdpi │ │ └── ic_launcher.png │ │ ├── values-v21 │ │ └── styles.xml │ │ ├── values-w820dp │ │ └── dimens.xml │ │ └── values │ │ ├── attrs_chart_view.xml │ │ ├── colors.xml │ │ ├── dimens.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── cn │ └── mandata │ └── react_native_mpchart │ └── ExampleUnitTest.java ├── index.js ├── package.json └── sample ├── BarChart.js ├── Button.js ├── CandleChart.js ├── CombinedChart.js ├── Index.js ├── LineChart.js ├── RadarChart.js ├── TitleBar.js ├── chart1.JPG └── chart2.JPG /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | # 27 | .idea 28 | .gradle 29 | local.properties 30 | 31 | # node.js 32 | # 33 | node_modules/ 34 | npm-debug.log 35 | *.iml 36 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IJ 26 | /android/src/test 27 | /android/src/androidTest 28 | # 29 | .idea 30 | .gradle 31 | local.properties 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | sample/ 37 | npm-debug.log 38 | -------------------------------------------------------------------------------- /BarChart.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {requireNativeComponent, View} from 'react-native'; 4 | 5 | class BarChart extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | ); 14 | } 15 | } 16 | 17 | BarChart.propTypes = { 18 | ...View.propTypes, 19 | data:PropTypes.object, 20 | touchEnabled:PropTypes.bool, 21 | dragEnabled:PropTypes.bool, 22 | scaleEnabled:PropTypes.bool, 23 | scaleXEnabled:PropTypes.bool, 24 | scaleYEnabled:PropTypes.bool, 25 | pinchZoom:PropTypes.bool, 26 | doubleTapToZoomEnabled:PropTypes.bool, 27 | highlightPerDragEnabled:PropTypes.bool, 28 | highlightPerTapEnabled:PropTypes.bool, 29 | dragDecelerationEnabled:PropTypes.bool, 30 | dragDecelerationFrictionCoef:PropTypes.number, 31 | maxVisibleValueCount:PropTypes.number, 32 | limitLine:PropTypes.object, 33 | description:PropTypes.string, 34 | backgroundColor:PropTypes.string, 35 | drawGridBackground:PropTypes.bool, 36 | gridBackgroundColor:PropTypes.string, 37 | visibleXRange:PropTypes.array, 38 | borderColor:PropTypes.string, 39 | borderWidth:PropTypes.number, 40 | xAxis:PropTypes.object, 41 | yAxisLeft:PropTypes.object, 42 | yAxisRight:PropTypes.object, 43 | yAxis:PropTypes.object, 44 | fitScreen:PropTypes.bool, 45 | chartPadding:PropTypes.string, 46 | legend:PropTypes.object, 47 | scaleX: PropTypes.number, 48 | scaleY: PropTypes.number, 49 | translateX: PropTypes.number, 50 | translateY: PropTypes.number, 51 | rotation: PropTypes.number, 52 | renderToHardwareTextureAndroid: PropTypes.bool, 53 | onLayout: PropTypes.bool, 54 | accessibilityLiveRegion: PropTypes.string, 55 | accessibilityComponentType: PropTypes.string, 56 | importantForAccessibility: PropTypes.string, 57 | accessibilityLabel: PropTypes.string, 58 | testID: PropTypes.string, 59 | viewCenter: PropTypes.array, 60 | zoomTo: PropTypes.object, 61 | extraOffsets: PropTypes.string 62 | } 63 | 64 | var MPBarChart = requireNativeComponent('MPBarChart', BarChart); 65 | 66 | export default BarChart; 67 | -------------------------------------------------------------------------------- /CandleStickChart.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {requireNativeComponent, View} from 'react-native'; 4 | 5 | class CandleStickChart extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | ); 14 | } 15 | } 16 | 17 | CandleStickChart.propTypes = { 18 | ...View.propTypes, 19 | data:PropTypes.object, 20 | touchEnabled:PropTypes.bool, 21 | dragEnabled:PropTypes.bool, 22 | scaleEnabled:PropTypes.bool, 23 | scaleXEnabled:PropTypes.bool, 24 | scaleYEnabled:PropTypes.bool, 25 | pinchZoom:PropTypes.bool, 26 | doubleTapToZoomEnabled:PropTypes.bool, 27 | highlightPerDragEnabled:PropTypes.bool, 28 | highlightPerTapEnabled:PropTypes.bool, 29 | dragDecelerationEnabled:PropTypes.bool, 30 | dragDecelerationFrictionCoef:PropTypes.number, 31 | maxVisibleValueCount:PropTypes.number, 32 | limitLine:PropTypes.object, 33 | description:PropTypes.string, 34 | backgroundColor:PropTypes.string, 35 | drawGridBackground:PropTypes.bool, 36 | gridBackgroundColor:PropTypes.string, 37 | visibleXRange:PropTypes.array, 38 | borderColor:PropTypes.string, 39 | borderWidth:PropTypes.number, 40 | xAxis:PropTypes.object, 41 | yAxisLeft:PropTypes.object, 42 | yAxisRight:PropTypes.object, 43 | yAxis:PropTypes.object, 44 | fitScreen:PropTypes.bool, 45 | chartPadding:PropTypes.string, 46 | legend:PropTypes.object, 47 | scaleX: PropTypes.number, 48 | scaleY: PropTypes.number, 49 | translateX: PropTypes.number, 50 | translateY: PropTypes.number, 51 | rotation: PropTypes.number, 52 | renderToHardwareTextureAndroid: PropTypes.bool, 53 | onLayout: PropTypes.bool, 54 | accessibilityLiveRegion: PropTypes.string, 55 | accessibilityComponentType: PropTypes.string, 56 | importantForAccessibility: PropTypes.string, 57 | accessibilityLabel: PropTypes.string, 58 | testID: PropTypes.string, 59 | viewCenter: PropTypes.array, 60 | zoomTo: PropTypes.object, 61 | extraOffsets: PropTypes.string 62 | } 63 | 64 | var MPCandleStickChart = requireNativeComponent('MPCandleStickChart', CandleStickChart); 65 | 66 | export default CandleStickChart; 67 | -------------------------------------------------------------------------------- /CombinedChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { requireNativeComponent, View } from 'react-native'; 4 | 5 | class CombinedChart extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | let chartData = {}; 12 | let children = this.props.children; 13 | let { style, animateY, animateX, animateXY, ...other } = this.props; 14 | 15 | if (children.length) { 16 | for (var i = 0; i < children.length; i++) { 17 | var child = children[i] 18 | chartData[child.props.chartType] = child.props.data; 19 | } 20 | } else { 21 | chartData[children.props.chartType] = children.props.data; 22 | } 23 | 24 | if (animateY) { 25 | chartData.animateY = animateY 26 | } else if (animateX) { 27 | chartData.animateX = animateX 28 | } else if (animateXY) { 29 | chartData.animateXY = animateXY 30 | } 31 | 32 | return ( 33 | 38 | ); 39 | } 40 | } 41 | 42 | CombinedChart.propTypes = { 43 | ...View.propTypes, 44 | data: PropTypes.object, 45 | touchEnabled: PropTypes.bool, 46 | dragEnabled: PropTypes.bool, 47 | scaleEnabled: PropTypes.bool, 48 | scaleXEnabled: PropTypes.bool, 49 | scaleYEnabled: PropTypes.bool, 50 | pinchZoom: PropTypes.bool, 51 | doubleTapToZoomEnabled: PropTypes.bool, 52 | highlightPerDragEnabled: PropTypes.bool, 53 | highlightPerTapEnabled: PropTypes.bool, 54 | dragDecelerationEnabled: PropTypes.bool, 55 | dragDecelerationFrictionCoef: PropTypes.number, 56 | maxVisibleValueCount: PropTypes.number, 57 | limitLine: PropTypes.object, 58 | description: PropTypes.string, 59 | backgroundColor: PropTypes.string, 60 | drawGridBackground: PropTypes.bool, 61 | gridBackgroundColor: PropTypes.string, 62 | visibleXRange: PropTypes.array, 63 | borderColor: PropTypes.string, 64 | borderWidth: PropTypes.number, 65 | xAxis: PropTypes.object, 66 | yAxisLeft: PropTypes.object, 67 | yAxisRight: PropTypes.object, 68 | yAxis: PropTypes.object, 69 | fitScreen: PropTypes.bool, 70 | chartPadding: PropTypes.string, 71 | legend: PropTypes.object, 72 | scaleX: PropTypes.number, 73 | scaleY: PropTypes.number, 74 | translateX: PropTypes.number, 75 | translateY: PropTypes.number, 76 | rotation: PropTypes.number, 77 | renderToHardwareTextureAndroid: PropTypes.bool, 78 | onLayout: PropTypes.bool, 79 | accessibilityLiveRegion: PropTypes.string, 80 | accessibilityComponentType: PropTypes.string, 81 | importantForAccessibility: PropTypes.string, 82 | accessibilityLabel: PropTypes.string, 83 | testID: PropTypes.string, 84 | viewCenter: PropTypes.array, 85 | zoomTo: PropTypes.object, 86 | extraOffsets: PropTypes.string, 87 | animateY: PropTypes.object, 88 | animateX: PropTypes.object, 89 | animateXY: PropTypes.object, 90 | }; 91 | 92 | class chart extends Component { 93 | constructor(props) { 94 | super(props); 95 | } 96 | render() { 97 | return null; 98 | } 99 | } 100 | chart.propTypes = { 101 | chartType: PropTypes.string, 102 | data: PropTypes.object, 103 | }; 104 | CombinedChart.Chart = chart; 105 | 106 | // RIGHT_OF_CHART, 107 | // RIGHT_OF_CHART_CENTER, 108 | // RIGHT_OF_CHART_INSIDE, 109 | // LEFT_OF_CHART, 110 | // LEFT_OF_CHART_CENTER, 111 | // LEFT_OF_CHART_INSIDE, 112 | // BELOW_CHART_LEFT, 113 | // BELOW_CHART_RIGHT, 114 | // BELOW_CHART_CENTER, 115 | // ABOVE_CHART_LEFT, 116 | // ABOVE_CHART_RIGHT, 117 | // ABOVE_CHART_CENTER, 118 | // PIECHART_CENTER; 119 | 120 | var MPCombinedChart = requireNativeComponent('MPCombinedChart', CombinedChart); 121 | 122 | export default CombinedChart; 123 | -------------------------------------------------------------------------------- /HorizontalBarChart.js: -------------------------------------------------------------------------------- 1 | import React, {Component, PropTypes} from 'react'; 2 | import {requireNativeComponent, View} from 'react-native'; 3 | import BarChart from './BarChart'; 4 | 5 | class HorizontalBarChart extends BarChart { 6 | render() { 7 | return ( 8 | 9 | ); 10 | } 11 | } 12 | 13 | var MPHorizontalBarChart = requireNativeComponent('MPHorizontalBarChart', HorizontalBarChart); 14 | 15 | export default HorizontalBarChart; 16 | -------------------------------------------------------------------------------- /LineChart.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {requireNativeComponent, View} from 'react-native'; 4 | 5 | class LineChart extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | ); 14 | } 15 | } 16 | 17 | LineChart.propTypes = { 18 | ...View.propTypes, 19 | data:PropTypes.object, 20 | touchEnabled:PropTypes.bool, 21 | dragEnabled:PropTypes.bool, 22 | scaleEnabled:PropTypes.bool, 23 | scaleXEnabled:PropTypes.bool, 24 | scaleYEnabled:PropTypes.bool, 25 | pinchZoom:PropTypes.bool, 26 | doubleTapToZoomEnabled:PropTypes.bool, 27 | highlightPerDragEnabled:PropTypes.bool, 28 | highlightPerTapEnabled:PropTypes.bool, 29 | dragDecelerationEnabled:PropTypes.bool, 30 | dragDecelerationFrictionCoef:PropTypes.number, 31 | maxVisibleValueCount:PropTypes.number, 32 | limitLine:PropTypes.object, 33 | description:PropTypes.string, 34 | backgroundColor:PropTypes.string, 35 | drawGridBackground:PropTypes.bool, 36 | gridBackgroundColor:PropTypes.string, 37 | visibleXRange:PropTypes.array, 38 | borderColor:PropTypes.string, 39 | borderWidth:PropTypes.number, 40 | xAxis:PropTypes.object, 41 | yAxisLeft:PropTypes.object, 42 | yAxisRight:PropTypes.object, 43 | yAxis:PropTypes.object, 44 | fitScreen:PropTypes.bool, 45 | chartPadding:PropTypes.string, 46 | legend:PropTypes.object, 47 | viewCenter: PropTypes.array, 48 | zoomTo: PropTypes.object, 49 | extraOffsets: PropTypes.string 50 | } 51 | 52 | var MPLineChart = requireNativeComponent('MPLineChart', LineChart); 53 | 54 | export default LineChart; 55 | -------------------------------------------------------------------------------- /PieChart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {requireNativeComponent, View} from 'react-native'; 4 | 5 | class PieChart extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | ); 14 | } 15 | } 16 | 17 | PieChart.propTypes = { 18 | ...View.propTypes, 19 | data:PropTypes.object, 20 | touchEnabled:PropTypes.bool, 21 | dragEnabled:PropTypes.bool, 22 | scaleEnabled:PropTypes.bool, 23 | scaleXEnabled:PropTypes.bool, 24 | scaleYEnabled:PropTypes.bool, 25 | pinchZoom:PropTypes.bool, 26 | doubleTapToZoomEnabled:PropTypes.bool, 27 | highlightPerDragEnabled:PropTypes.bool, 28 | highlightPerTapEnabled:PropTypes.bool, 29 | dragDecelerationEnabled:PropTypes.bool, 30 | dragDecelerationFrictionCoef:PropTypes.number, 31 | maxVisibleValueCount:PropTypes.number, 32 | limitLine:PropTypes.object, 33 | description:PropTypes.string, 34 | backgroundColor:PropTypes.string, 35 | drawGridBackground:PropTypes.bool, 36 | gridBackgroundColor:PropTypes.string, 37 | borderColor:PropTypes.string, 38 | borderWidth:PropTypes.number, 39 | chartPadding:PropTypes.string, 40 | legend:PropTypes.object, 41 | holeRadius: PropTypes.number, 42 | transparentCircleRadius: PropTypes.number, 43 | drawSliceText: PropTypes.bool, 44 | usePercentValues: PropTypes.bool, 45 | centerText: PropTypes.string, 46 | centerTextRadiusPercent: PropTypes.number 47 | } 48 | 49 | var MPPieChart = requireNativeComponent('MPPieChart', PieChart); 50 | 51 | export default PieChart; 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-chart-android 2 | react-native-chart-android provide modules to add chart to android,all charts are come from mpandroidchart library,include bar chart ,line chart,combine chart etc. 3 | 4 | about MpAndroidChart ,you can read doc: 5 | 6 | -[**MPAndroidChart-github**](https://github.com/PhilJay/MPAndroidChart/) 7 | -[**MPAndroidChart-Wiki**](https://github.com/PhilJay/MPAndroidChart/wiki) 8 | 9 | 10 | ### Installation 11 | 12 | ``` 13 | npm install react-native-chart-android --save 14 | ``` 15 | 16 | ### Add it to your android project 17 | 18 | * In `android/setting.gradle` 19 | 20 | ```gradle 21 | include ':react-native-chart-android' 22 | project(':react-native-chart-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-chart-android/android') 23 | ``` 24 | 25 | * In `android/app/build.gradle` 26 | 27 | ```gradle 28 | ... 29 | dependencies { 30 | ... 31 | compile project(':react-native-chart-android') 32 | } 33 | ``` 34 | 35 | * Register Module (in MainApplication.java) 36 | 37 | ```java 38 | import cn.mandata.react_native_mpchart.MPChartPackage; // <--- import 39 | 40 | public class MainActivity extends ReactActivity { 41 | 42 | ...... 43 | 44 | /** 45 | * A list of packages used by the app. If the app uses additional views 46 | * or modules besides the default ones, add more packages here. 47 | */ 48 | @Override 49 | protected List getPackages() { 50 | return Arrays.asList( 51 | new MainReactPackage(), 52 | new ReactNativeIcons(Arrays.asList( 53 | new IconFont("typicons", "typicons.ttf"), 54 | new IconFont("fontawesome", "FontAwesome.otf") 55 | )), 56 | new MPChartPackage(),// <------ add this line to yout MainActivity class 57 | new ManDataLibPackage(), 58 | new BaiduVoiseLibPackage() 59 | ); 60 | } 61 | ...... 62 | } 63 | ``` 64 | 65 | ## Example 66 | ```javascript 67 | /* @flow */ 68 | 'use strict'; 69 | 70 | var React = require('react-native'); 71 | var TitleBar=require('./TitleBar'); 72 | var { 73 | BarChart, 74 | CombinedChart 75 | }=require('../index.android'); 76 | var { 77 | StyleSheet, 78 | View, 79 | Text 80 | } = React; 81 | 82 | var Component = React.createClass({ 83 | getBarData:function (argument) { 84 | var data={ 85 | xValues:['1','2','3'], 86 | yValues:[ 87 | { 88 | data:[4.0,5.0,6.0], 89 | label:'test1', 90 | config:{ 91 | color:'blue' 92 | } 93 | }, 94 | { 95 | data:[4.0,5.0,6.0], 96 | label:'test2', 97 | config:{ 98 | color:'red' 99 | } 100 | }, 101 | { 102 | data:[4.0,5.0,6.0], 103 | label:'test2', 104 | config:{ 105 | color:'yellow' 106 | } 107 | } 108 | ] 109 | }; 110 | return data; 111 | }, 112 | getRandomData:function (argument) { 113 | var data={}; 114 | data['xValues']=[]; 115 | data['yValues']=[ 116 | { 117 | data:[], 118 | label:'test1', 119 | config:{ 120 | color:'blue' 121 | } 122 | } 123 | ]; 124 | for (var i = 0; i < 500; i++) { 125 | data.xValues.push(i+''); 126 | data.yValues[0].data.push(Math.random()*100); 127 | }; 128 | return data; 129 | }, 130 | render: function() { 131 | return ( 132 | 133 | 134 | 135 | 136 | 137 | 150 | 151 | { 178 | console.log("onSelect xIndex", e.nativeEvent.xIndex, "yValue:", e.nativeEvent.yValue); 179 | }} 180 | /> 181 | 182 | 183 | ); 184 | } 185 | }); 186 | 187 | var styles = StyleSheet.create({ 188 | container:{ 189 | flex:1 190 | }, 191 | chartContainer:{ 192 | flex:1 193 | }, 194 | chart:{ 195 | flex:1 196 | } 197 | }); 198 | 199 | 200 | module.exports = Component; 201 | 202 | ``` 203 | ![alt tag](https://github.com/hongyin163/react-native-chart-android/blob/master/sample/chart1.JPG) 204 | 205 | ![alt tag](https://github.com/hongyin163/react-native-chart-android/blob/master/sample/chart2.JPG) 206 | 207 | There are some samples in sample folder,you can download them and try to run them. 208 | ## License 209 | MIT 210 | -------------------------------------------------------------------------------- /RadarChart.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import {requireNativeComponent, View} from 'react-native'; 4 | 5 | class RadarChart extends Component { 6 | constructor(props) { 7 | super(props); 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | ); 14 | } 15 | } 16 | 17 | RadarChart.propTypes = { 18 | ...View.propTypes, 19 | data:PropTypes.object, 20 | webLineWidth:PropTypes.number, 21 | webLineWidthInner:PropTypes.number, 22 | webAlpha:PropTypes.number, 23 | webColor:PropTypes.number, 24 | webColorInner:PropTypes.number, 25 | drawWeb:PropTypes.bool, 26 | dragEnabled:PropTypes.bool, 27 | legend:PropTypes.object, 28 | touchEnabled:PropTypes.bool, 29 | dragDecelerationEnabled:PropTypes.bool, 30 | dragDecelerationFrictionCoef:PropTypes.number, 31 | description:PropTypes.string, 32 | chartPadding:PropTypes.string, 33 | highlightPerDragEnabled:PropTypes.bool, 34 | highlightPerTapEnabled:PropTypes.bool, 35 | skipWebLineCount:PropTypes.number, 36 | } 37 | 38 | var MPRadarChart = requireNativeComponent('MPRadarChart', RadarChart); 39 | 40 | export default RadarChart; 41 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:1.3.1' 10 | } 11 | } 12 | android { 13 | compileSdkVersion 23 14 | buildToolsVersion "23.0.1" 15 | 16 | defaultConfig { 17 | minSdkVersion 16 18 | targetSdkVersion 23 19 | versionCode 1 20 | versionName "1.0" 21 | } 22 | lintOptions { 23 | abortOnError false 24 | } 25 | } 26 | dependencies { 27 | compile fileTree(dir: 'libs', include: ['*.jar']) 28 | compile 'com.android.support:design:23.0.1' 29 | compile 'com.facebook.react:react-native:0.20.+' 30 | compile 'com.android.support:appcompat-v7:23.0.1' 31 | } 32 | -------------------------------------------------------------------------------- /android/libs/mpandroidchartlibrary-2-2-4.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hongyin163/react-native-chart-android/eeba3aced601eafe34bad33f784ea55bf81f0fa6/android/libs/mpandroidchartlibrary-2-2-4.jar -------------------------------------------------------------------------------- /android/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in D:\WorkFolder\MyProject\Tool\adt-bundle-windows-x86\sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /android/src/androidTest/java/cn/mandata/react_native_mpchart/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/ChartView.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.content.Context; 4 | import android.content.res.TypedArray; 5 | import android.graphics.Canvas; 6 | import android.graphics.Color; 7 | import android.graphics.Paint; 8 | import android.graphics.drawable.Drawable; 9 | import android.text.TextPaint; 10 | import android.util.AttributeSet; 11 | import android.view.View; 12 | 13 | /** 14 | * TODO: document your custom view class. 15 | */ 16 | public class ChartView extends View { 17 | private String mExampleString; // TODO: use a default from R.string... 18 | private int mExampleColor = Color.RED; // TODO: use a default from R.color... 19 | private float mExampleDimension = 0; // TODO: use a default from R.dimen... 20 | private Drawable mExampleDrawable; 21 | 22 | private TextPaint mTextPaint; 23 | private float mTextWidth; 24 | private float mTextHeight; 25 | 26 | public ChartView(Context context) { 27 | super(context); 28 | init(null, 0); 29 | } 30 | 31 | public ChartView(Context context, AttributeSet attrs) { 32 | super(context, attrs); 33 | init(attrs, 0); 34 | } 35 | 36 | public ChartView(Context context, AttributeSet attrs, int defStyle) { 37 | super(context, attrs, defStyle); 38 | init(attrs, defStyle); 39 | } 40 | 41 | 42 | private void init(AttributeSet attrs, int defStyle) { 43 | // Load attributes 44 | final TypedArray a = getContext().obtainStyledAttributes( 45 | attrs, R.styleable.ChartView, defStyle, 0); 46 | 47 | mExampleString = a.getString( 48 | R.styleable.ChartView_exampleString); 49 | mExampleColor = a.getColor( 50 | R.styleable.ChartView_exampleColor, 51 | mExampleColor); 52 | // Use getDimensionPixelSize or getDimensionPixelOffset when dealing with 53 | // values that should fall on pixel boundaries. 54 | mExampleDimension = a.getDimension( 55 | R.styleable.ChartView_exampleDimension, 56 | mExampleDimension); 57 | 58 | if (a.hasValue(R.styleable.ChartView_exampleDrawable)) { 59 | mExampleDrawable = a.getDrawable( 60 | R.styleable.ChartView_exampleDrawable); 61 | mExampleDrawable.setCallback(this); 62 | } 63 | 64 | a.recycle(); 65 | 66 | // Set up a default TextPaint object 67 | mTextPaint = new TextPaint(); 68 | mTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG); 69 | mTextPaint.setTextAlign(Paint.Align.LEFT); 70 | 71 | // Update TextPaint and text measurements from attributes 72 | invalidateTextPaintAndMeasurements(); 73 | } 74 | 75 | private void invalidateTextPaintAndMeasurements() { 76 | mTextPaint.setTextSize(mExampleDimension); 77 | mTextPaint.setColor(mExampleColor); 78 | if(mExampleString==null) 79 | mExampleString=""; 80 | mTextWidth = mTextPaint.measureText(mExampleString); 81 | 82 | Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics(); 83 | mTextHeight = fontMetrics.bottom; 84 | } 85 | 86 | @Override 87 | protected void onDraw(Canvas canvas) { 88 | super.onDraw(canvas); 89 | 90 | // TODO: consider storing these as member variables to reduce 91 | // allocations per draw cycle. 92 | int paddingLeft = getPaddingLeft(); 93 | int paddingTop = getPaddingTop(); 94 | int paddingRight = getPaddingRight(); 95 | int paddingBottom = getPaddingBottom(); 96 | 97 | int contentWidth = getWidth() - paddingLeft - paddingRight; 98 | int contentHeight = getHeight() - paddingTop - paddingBottom; 99 | 100 | // Draw the text. 101 | canvas.drawText(mExampleString, 102 | paddingLeft + (contentWidth - mTextWidth) / 2, 103 | paddingTop + (contentHeight + mTextHeight) / 2, 104 | mTextPaint); 105 | 106 | // Draw the example drawable on top of the text. 107 | if (mExampleDrawable != null) { 108 | mExampleDrawable.setBounds(paddingLeft, paddingTop, 109 | paddingLeft + contentWidth, paddingTop + contentHeight); 110 | mExampleDrawable.draw(canvas); 111 | } 112 | } 113 | 114 | 115 | public void setData(String data){ 116 | this.setExampleString(data); 117 | } 118 | /** 119 | * Gets the example string attribute value. 120 | * 121 | * @return The example string attribute value. 122 | */ 123 | public String getExampleString() { 124 | return mExampleString; 125 | } 126 | 127 | /** 128 | * Sets the view's example string attribute value. In the example view, this string 129 | * is the text to draw. 130 | * 131 | * @param exampleString The example string attribute value to use. 132 | */ 133 | public void setExampleString(String exampleString) { 134 | mExampleString = exampleString; 135 | invalidateTextPaintAndMeasurements(); 136 | } 137 | 138 | /** 139 | * Gets the example color attribute value. 140 | * 141 | * @return The example color attribute value. 142 | */ 143 | public int getExampleColor() { 144 | return mExampleColor; 145 | } 146 | 147 | /** 148 | * Sets the view's example color attribute value. In the example view, this color 149 | * is the font color. 150 | * 151 | * @param exampleColor The example color attribute value to use. 152 | */ 153 | public void setExampleColor(int exampleColor) { 154 | mExampleColor = exampleColor; 155 | invalidateTextPaintAndMeasurements(); 156 | } 157 | 158 | /** 159 | * Gets the example dimension attribute value. 160 | * 161 | * @return The example dimension attribute value. 162 | */ 163 | public float getExampleDimension() { 164 | return mExampleDimension; 165 | } 166 | 167 | /** 168 | * Sets the view's example dimension attribute value. In the example view, this dimension 169 | * is the font size. 170 | * 171 | * @param exampleDimension The example dimension attribute value to use. 172 | */ 173 | public void setExampleDimension(float exampleDimension) { 174 | mExampleDimension = exampleDimension; 175 | invalidateTextPaintAndMeasurements(); 176 | } 177 | 178 | /** 179 | * Gets the example drawable attribute value. 180 | * 181 | * @return The example drawable attribute value. 182 | */ 183 | public Drawable getExampleDrawable() { 184 | return mExampleDrawable; 185 | } 186 | 187 | /** 188 | * Sets the view's example drawable attribute value. In the example view, this drawable is 189 | * drawn above the text. 190 | * 191 | * @param exampleDrawable The example drawable attribute value to use. 192 | */ 193 | public void setExampleDrawable(Drawable exampleDrawable) { 194 | mExampleDrawable = exampleDrawable; 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/ChartViewManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.support.annotation.Nullable; 4 | 5 | import com.facebook.react.uimanager.annotations.ReactProp; 6 | import com.facebook.react.uimanager.SimpleViewManager; 7 | import com.facebook.react.uimanager.ThemedReactContext; 8 | 9 | /** 10 | * Created by Administrator on 2015/11/6. 11 | */ 12 | public class ChartViewManager extends SimpleViewManager { 13 | public static final String REACT_CLASS = "MPChart"; 14 | @Override 15 | public String getName() { 16 | return REACT_CLASS; 17 | } 18 | 19 | @Override 20 | protected ChartView createViewInstance(ThemedReactContext reactContext) { 21 | ChartView chart= new ChartView(reactContext); 22 | chart.setExampleDimension(50); 23 | return chart; 24 | } 25 | 26 | @ReactProp(name = "data") 27 | public void setData(ChartView view, @Nullable String text) { 28 | view.setData(text); 29 | view.invalidate(); 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/CustomYAxisValueFormatter.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import com.github.mikephil.charting.components.YAxis; 4 | import com.github.mikephil.charting.formatter.YAxisValueFormatter; 5 | 6 | /** 7 | * Created by Administrator on 2015/11/7. 8 | */ 9 | public class CustomYAxisValueFormatter implements YAxisValueFormatter { 10 | private String FormAt=""; 11 | public CustomYAxisValueFormatter(String formAt){ 12 | this.FormAt=formAt; 13 | } 14 | @Override 15 | public String getFormattedValue(float v, YAxis yAxis) { 16 | return String.format(FormAt,v); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPBarChartManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.graphics.Color; 4 | 5 | import com.facebook.react.bridge.ReadableArray; 6 | import com.facebook.react.bridge.ReadableMap; 7 | import com.facebook.react.uimanager.annotations.ReactProp; 8 | import com.facebook.react.uimanager.SimpleViewManager; 9 | import com.facebook.react.uimanager.ThemedReactContext; 10 | import com.github.mikephil.charting.charts.BarChart; 11 | import com.github.mikephil.charting.charts.BarLineChartBase; 12 | import com.github.mikephil.charting.components.AxisBase; 13 | import com.github.mikephil.charting.components.LimitLine; 14 | import com.github.mikephil.charting.components.YAxis; 15 | import com.github.mikephil.charting.data.BarData; 16 | import com.github.mikephil.charting.data.BarDataSet; 17 | import com.github.mikephil.charting.data.BarEntry; 18 | import com.github.mikephil.charting.data.DataSet; 19 | import com.github.mikephil.charting.utils.ColorTemplate; 20 | 21 | import java.util.ArrayList; 22 | import java.util.Random; 23 | 24 | /** 25 | * Created by Administrator on 2015/11/6. 26 | */ 27 | public class MPBarChartManager extends MPBarLineChartManager { 28 | private String CLASS_NAME="MPBarChart"; 29 | @Override 30 | public String getName() { 31 | return this.CLASS_NAME; 32 | } 33 | 34 | @Override 35 | protected BarChart createViewInstance(ThemedReactContext reactContext) { 36 | BarChart chart=new BarChart(reactContext); 37 | 38 | // initialise event listener to bind to chart 39 | new MPChartSelectionEventListener(chart); 40 | 41 | return chart; 42 | } 43 | 44 | //{XValues:[],YValues:[{Data:[],Label:""},{}]} 45 | @ReactProp(name="data") 46 | public void setData(BarChart chart,ReadableMap rm){ 47 | 48 | ReadableArray xArray=rm.getArray("xValues"); 49 | ArrayList xVals=new ArrayList(); 50 | for(int m=0;m entries=new ArrayList(); 61 | for (int j=0;j colors = new ArrayList<>(); 74 | for(int c = 0; c < colorsArray.size(); c++){ 75 | colors.add(Color.parseColor(colorsArray.getString(c))); 76 | } 77 | dataSet.setValueTextColors(colors); 78 | }else 79 | if(config.hasKey("valueTextColor")) dataSet.setValueTextColor(Color.parseColor(config.getString("valueTextColor"))); 80 | 81 | // Text Size for bar value 82 | 83 | if(config.hasKey("valueTextSize")) dataSet.setValueTextSize((float)config.getDouble("valueTextSize")); 84 | 85 | if(config.hasKey("drawValues")) dataSet.setDrawValues(config.getBoolean("drawValues")); 86 | if(config.hasKey("colors")){ 87 | ReadableArray colorsArray = config.getArray("colors"); 88 | ArrayList colors = new ArrayList<>(); 89 | for(int c = 0; c < colorsArray.size(); c++){ 90 | colors.add(Color.parseColor(colorsArray.getString(c))); 91 | } 92 | dataSet.setColors(colors); 93 | }else 94 | if(config.hasKey("color")) { 95 | int[] colors=new int[]{Color.parseColor(config.getString("color"))}; 96 | dataSet.setColors(colors); 97 | } 98 | 99 | if(config.hasKey("valueFormatter")){ 100 | ReadableMap formatterMap = config.getMap("valueFormatter"); 101 | if(formatterMap.hasKey("type")){ 102 | String type = formatterMap.getString("type"); 103 | if("printf".equalsIgnoreCase(type)){ 104 | String format = ""; 105 | if(formatterMap.hasKey("format")) format = formatterMap.getString("format"); 106 | dataSet.setValueFormatter(new PrintfValueFormatter(format)); 107 | } 108 | } 109 | } 110 | 111 | barData.addDataSet(dataSet); 112 | 113 | } 114 | chart.setData(barData); 115 | 116 | /** 117 | * Graph animation configurations 118 | * If no animation config provided, call chart.invalidate() 119 | * animation configs are maps with the following keys 120 | * - duration or durationX/durationY in case of animateXY 121 | * - support for easeFunction yet to be given 122 | */ 123 | if (rm.hasKey("animateX")) { 124 | chart.animateX(rm.getMap("animateX").getInt("duration")); 125 | } else if (rm.hasKey("animateY")) { 126 | chart.animateY(rm.getMap("animateY").getInt("duration")); 127 | } else if (rm.hasKey("animateXY")) { 128 | ReadableMap animationConfig = rm.getMap("animateXY"); 129 | chart.animateXY( 130 | animationConfig.getInt("durationX"), 131 | animationConfig.getInt("durationY") 132 | ); 133 | } else { 134 | chart.invalidate(); 135 | } 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPBarLineChartManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.graphics.Color; 4 | 5 | import com.facebook.react.bridge.ReadableArray; 6 | import com.facebook.react.bridge.ReadableMap; 7 | import com.facebook.react.uimanager.annotations.ReactProp; 8 | import com.facebook.react.uimanager.SimpleViewManager; 9 | import com.facebook.react.uimanager.ThemedReactContext; 10 | import com.github.mikephil.charting.charts.BarChart; 11 | import com.github.mikephil.charting.charts.BarLineChartBase; 12 | import com.github.mikephil.charting.components.AxisBase; 13 | import com.github.mikephil.charting.components.Legend; 14 | import com.github.mikephil.charting.components.LimitLine; 15 | import com.github.mikephil.charting.components.XAxis; 16 | import com.github.mikephil.charting.components.YAxis; 17 | import com.github.mikephil.charting.components.YAxis.AxisDependency; 18 | import com.github.mikephil.charting.data.BarData; 19 | import com.github.mikephil.charting.data.BarDataSet; 20 | import com.github.mikephil.charting.data.BarEntry; 21 | import com.github.mikephil.charting.data.DataSet; 22 | import com.github.mikephil.charting.formatter.XAxisValueFormatter; 23 | import com.github.mikephil.charting.utils.ColorTemplate; 24 | import com.github.mikephil.charting.utils.ViewPortHandler; 25 | 26 | import java.util.ArrayList; 27 | import java.util.Random; 28 | 29 | /** 30 | * Created by Administrator on 2015/11/6. 31 | */ 32 | public class MPBarLineChartManager extends SimpleViewManager { 33 | private String CLASS_NAME="MPBarLineChart"; 34 | private Random random;//用于产生随机数 35 | 36 | private BarChart chart; 37 | private BarData data; 38 | private BarDataSet dataSet; 39 | 40 | @Override 41 | public String getName() { 42 | return this.CLASS_NAME; 43 | } 44 | 45 | @Override 46 | protected BarLineChartBase createViewInstance(ThemedReactContext reactContext) { 47 | BarChart chart=new BarChart(reactContext); 48 | //com.facebook.react.uimanager.ViewGroupManager 49 | /* *//**图表具体设置*//* 50 | ArrayList entries = new ArrayList<>();//显示条目 51 | ArrayList xVals = new ArrayList();//横坐标标签 52 | random=new Random();//随机数 53 | for(int i=0;i<12;i++){ 54 | float profit= random.nextFloat()*1000; 55 | //entries.add(BarEntry(float val,int positon); 56 | entries.add(new BarEntry(profit,i)); 57 | xVals.add((i+1)+"月"); 58 | } 59 | dataSet = new BarDataSet(entries, "公司年利润报表"); 60 | dataSet.setColors(ColorTemplate.COLORFUL_COLORS); 61 | data = new BarData(xVals, dataSet); 62 | chart.setData(data); 63 | //设置Y方向上动画animateY(int time); 64 | chart.animateY(3000); 65 | //图表描述 66 | chart.setDescription("公司前半年财务报表(单位：万元)");*/ 67 | new MPChartSelectionEventListener(chart); 68 | 69 | 70 | return chart; 71 | } 72 | 73 | 74 | /* //{xLabel:"",yLabel:"",xUnit:"",yUnit:"",xValues:[],yValues:[],unit:"",data:[]} 75 | @ReactProp(name = "config") 76 | public void setConfig(BarChart chart,ReadableMap data){ 77 | ReadableArray ra=data.getArray("data"); 78 | String label=data.getString("label"); 79 | 80 | ArrayList entries = new ArrayList<>(); 81 | for(int i=0;i xVals=new ArrayList(); 71 | for(int m=0;m entries=new ArrayList(); 76 | for(int i=0;i createNativeModules(ReactApplicationContext reactContext) { 21 | return new ArrayList(); 22 | } 23 | 24 | @Override 25 | public List> createJSModules() { 26 | return Collections.emptyList(); 27 | } 28 | 29 | @Override 30 | public List createViewManagers(ReactApplicationContext reactContext) { 31 | return Arrays.asList( 32 | new ChartViewManager(), 33 | new MPBarChartManager(), 34 | new MPHorizontalBarChartManager(), 35 | new MPLineChartManager(), 36 | new MPCombinedChartManager(), 37 | new MPCandleStickChartManager(), 38 | new MPPieChartManager(), 39 | new MPRadarChartManager() 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPChartSelectionEventListener.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.view.MotionEvent; 4 | 5 | import com.facebook.react.bridge.Arguments; 6 | import com.facebook.react.bridge.WritableMap; 7 | import com.facebook.react.uimanager.ThemedReactContext; 8 | import com.facebook.react.uimanager.events.RCTEventEmitter; 9 | import com.github.mikephil.charting.charts.Chart; 10 | import com.github.mikephil.charting.listener.OnChartValueSelectedListener; 11 | 12 | import com.github.mikephil.charting.data.Entry; 13 | import com.github.mikephil.charting.highlight.Highlight; 14 | 15 | 16 | /* 17 | * implement OnChartValueSelectedListener interface to bridge selection callback 18 | * events support 19 | * use eventName 'topSelect' mapping to 'onSelect' callback prop in JS 20 | */ 21 | public class MPChartSelectionEventListener implements OnChartValueSelectedListener { 22 | private Chart chart=null; 23 | public MPChartSelectionEventListener(){ 24 | 25 | } 26 | public MPChartSelectionEventListener(Chart chart){ 27 | this.chart=chart; 28 | 29 | // bind selection callback listener to chart 30 | this.chart.setOnChartValueSelectedListener(this); 31 | } 32 | 33 | @Override 34 | public void onValueSelected(Entry e, int dataSetIndex, Highlight h) { 35 | WritableMap event = Arguments.createMap(); 36 | event.putInt("xIndex", e.getXIndex()); 37 | event.putDouble("yValue", e.getVal()); 38 | 39 | ThemedReactContext reactContext = (ThemedReactContext)this.chart.getContext(); 40 | 41 | reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( 42 | this.chart.getId(), 43 | "topSelect", 44 | event 45 | ); 46 | } 47 | 48 | @Override 49 | public void onNothingSelected() { 50 | WritableMap event = Arguments.createMap(); 51 | 52 | // pass xIndex as -1 for representing no selection 53 | event.putInt("xIndex", -1); 54 | 55 | ThemedReactContext reactContext = (ThemedReactContext)this.chart.getContext(); 56 | 57 | reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( 58 | this.chart.getId(), 59 | "topSelect", 60 | event 61 | ); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPCombinedChartManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | 4 | import android.graphics.Color; 5 | import android.graphics.Paint; 6 | 7 | import com.facebook.react.bridge.ReadableArray; 8 | import com.facebook.react.bridge.ReadableMap; 9 | import com.facebook.react.uimanager.annotations.ReactProp; 10 | import com.facebook.react.uimanager.annotations.ReactPropGroup; 11 | import com.facebook.react.uimanager.SimpleViewManager; 12 | import com.facebook.react.uimanager.ThemedReactContext; 13 | import com.facebook.react.uimanager.ViewGroupManager; 14 | import com.github.mikephil.charting.charts.BarChart; 15 | import com.github.mikephil.charting.charts.BarLineChartBase; 16 | import com.github.mikephil.charting.charts.CandleStickChart; 17 | import com.github.mikephil.charting.charts.CombinedChart; 18 | import com.github.mikephil.charting.charts.LineChart; 19 | import com.github.mikephil.charting.components.AxisBase; 20 | import com.github.mikephil.charting.components.Legend; 21 | import com.github.mikephil.charting.components.LimitLine; 22 | import com.github.mikephil.charting.components.XAxis; 23 | import com.github.mikephil.charting.components.YAxis; 24 | import com.github.mikephil.charting.data.BarData; 25 | import com.github.mikephil.charting.data.BarDataSet; 26 | import com.github.mikephil.charting.interfaces.datasets.IBarDataSet; 27 | import com.github.mikephil.charting.data.BarEntry; 28 | import com.github.mikephil.charting.data.BarLineScatterCandleBubbleDataSet; 29 | import com.github.mikephil.charting.data.CandleData; 30 | import com.github.mikephil.charting.data.CandleDataSet; 31 | import com.github.mikephil.charting.data.CandleEntry; 32 | import com.github.mikephil.charting.data.CombinedData; 33 | import com.github.mikephil.charting.data.DataSet; 34 | import com.github.mikephil.charting.data.Entry; 35 | import com.github.mikephil.charting.data.LineData; 36 | import com.github.mikephil.charting.data.LineDataSet; 37 | import com.github.mikephil.charting.utils.ColorTemplate; 38 | import com.github.mikephil.charting.components.YAxis.AxisDependency; 39 | 40 | import java.util.List; 41 | import java.util.ArrayList; 42 | import java.util.Random; 43 | 44 | /** 45 | * Created by Administrator on 2015/11/6. 46 | */ 47 | public class MPCombinedChartManager extends MPBarLineChartManager { 48 | private String CLASS_NAME="MPCombinedChart"; 49 | @Override 50 | public String getName() { 51 | return this.CLASS_NAME; 52 | } 53 | protected String[] mMonths = new String[] { 54 | "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" 55 | }; 56 | @Override 57 | protected CombinedChart createViewInstance(ThemedReactContext reactContext) { 58 | CombinedChart mChart=new CombinedChart(reactContext); 59 | return mChart; 60 | } 61 | //{xValues:[],yValues:[{data:[],label:"",config:{}},{...}]} 62 | public LineData getLineData(ReadableMap rm){ 63 | 64 | ReadableArray xArray=rm.getArray("xValues"); 65 | ArrayList xVals=new ArrayList(); 66 | for(int m=0;m entries=new ArrayList(); 77 | for (int j=0;j colors = new ArrayList<>(); 97 | for(int c = 0; c < colorsArray.size(); c++){ 98 | colors.add(Color.parseColor(colorsArray.getString(c))); 99 | } 100 | dataSet.setColors(colors); 101 | } else if(config.hasKey("color")) { 102 | int[] colors=new int[]{Color.parseColor(config.getString("color"))}; 103 | dataSet.setColors(colors); 104 | } 105 | 106 | if (config.hasKey("axisDependency")) { 107 | AxisDependency axisDependency = AxisDependency.LEFT; 108 | if (config.getString("axisDependency").equalsIgnoreCase("RIGHT")) { 109 | axisDependency = AxisDependency.RIGHT; 110 | } 111 | dataSet.setAxisDependency(axisDependency); 112 | } 113 | 114 | chartData.addDataSet(dataSet); 115 | } 116 | return chartData; 117 | } 118 | 119 | public BarData getBarData(ReadableMap rm){ 120 | 121 | ReadableArray xArray=rm.getArray("xValues"); 122 | List xVals=new ArrayList(); 123 | for(int m=0;m dataSetList=new ArrayList(); 128 | for(int i=0;i entries=new ArrayList(); 134 | for (int j=0;j colors = new ArrayList<>(); 145 | for(int c = 0; c < colorsArray.size(); c++){ 146 | colors.add(Color.parseColor(colorsArray.getString(c))); 147 | } 148 | dataSet.setColors(colors); 149 | }else if(config.hasKey("color")) { 150 | int[] colors=new int[]{Color.parseColor(config.getString("color"))}; 151 | dataSet.setColors(colors); 152 | } 153 | 154 | if (config.hasKey("axisDependency")) { 155 | AxisDependency axisDependency = AxisDependency.RIGHT; 156 | if (config.getString("axisDependency").equalsIgnoreCase("LEFT")) { 157 | axisDependency = AxisDependency.LEFT; 158 | } 159 | dataSet.setAxisDependency(axisDependency); 160 | } 161 | 162 | dataSetList.add(dataSet); 163 | } 164 | BarData barData=new BarData(xVals,dataSetList); 165 | return barData; 166 | } 167 | 168 | public CandleData getCandleData(ReadableMap rm){ 169 | String label=rm.getString("label"); 170 | ReadableArray xArray=rm.getArray("data"); 171 | ArrayList xVals=new ArrayList(); 172 | for(int m=0;m entries=new ArrayList(); 177 | for(int i=0;i xVals=new ArrayList(); 60 | for(int m=0;m entries=new ArrayList(); 71 | for (int j=0;j colors = new ArrayList<>(); 89 | for(int c = 0; c < colorsArray.size(); c++){ 90 | colors.add(Color.parseColor(colorsArray.getString(c))); 91 | } 92 | dataSet.setValueTextColors(colors); 93 | }else 94 | if(config.hasKey("drawValues")) dataSet.setDrawValues(config.getBoolean("drawValues")); 95 | if(config.hasKey("valueTextColor")) dataSet.setValueTextColor(Color.parseColor(config.getString("valueTextColor"))); 96 | 97 | // Text Size for bar value 98 | 99 | if(config.hasKey("valueTextSize")) dataSet.setValueTextSize((float)config.getDouble("valueTextSize")); 100 | 101 | if (config.hasKey("drawCircleHole")) dataSet.setDrawCircleHole(config.getBoolean("drawCircleHole")); 102 | if(config.hasKey("drawStepped")) dataSet.setDrawStepped(config.getBoolean("drawStepped")); 103 | if(config.hasKey("colors")){ 104 | ReadableArray colorsArray = config.getArray("colors"); 105 | ArrayList colors = new ArrayList<>(); 106 | for(int c = 0; c < colorsArray.size(); c++){ 107 | colors.add(Color.parseColor(colorsArray.getString(c))); 108 | } 109 | dataSet.setColors(colors); 110 | }else if (config.hasKey("color")) { 111 | int[] colors=new int[]{Color.parseColor(config.getString("color"))}; 112 | dataSet.setColors(colors); 113 | } 114 | if(config.hasKey("circleColors")){ 115 | ReadableArray colorsArray = config.getArray("circleColors"); 116 | ArrayList colors = new ArrayList<>(); 117 | for(int c = 0; c < colorsArray.size(); c++){ 118 | colors.add(Color.parseColor(colorsArray.getString(c))); 119 | } 120 | dataSet.setCircleColors(colors); 121 | }else if (config.hasKey("circleColor")) { 122 | int[] colors=new int[]{Color.parseColor(config.getString("circleColor"))}; 123 | dataSet.setCircleColors(colors); 124 | } 125 | if (config.hasKey("dashedLine")) { 126 | String[] dashedLine = config.getString("dashedLine").split(" "); 127 | dataSet.enableDashedLine(Integer.parseInt(dashedLine[0]), Integer.parseInt(dashedLine[1]), Integer.parseInt(dashedLine[2])); 128 | } 129 | 130 | if (config.hasKey("drawFill")) dataSet.setDrawFilled(config.getBoolean("drawFill")); 131 | if (config.hasKey("fillColor")) dataSet.setFillColor(Color.parseColor(config.getString("fillColor"))); 132 | if (config.hasKey("fillAlpha")) dataSet.setFillAlpha((int)(255 * config.getDouble("fillAlpha"))); 133 | if (config.hasKey("bezier")) dataSet.setDrawCubic(config.getBoolean("bezier")); 134 | if (config.hasKey("axisDependency")) { 135 | AxisDependency axisDependency = AxisDependency.LEFT; 136 | if (config.getString("axisDependency").equalsIgnoreCase("RIGHT")) { 137 | axisDependency = AxisDependency.RIGHT; 138 | } 139 | dataSet.setAxisDependency(axisDependency); 140 | } 141 | 142 | chartData.addDataSet(dataSet); 143 | } 144 | chart.setData(chartData); 145 | 146 | /** 147 | * Graph animation configurations 148 | * If no animation config provided, call chart.invalidate() 149 | * animation configs are maps with the following keys 150 | * - duration or durationX/durationY in case of animateXY 151 | * - support for easeFunction yet to be given 152 | */ 153 | if (rm.hasKey("animateX")) { 154 | chart.animateX(rm.getMap("animateX").getInt("duration")); 155 | } else if (rm.hasKey("animateY")) { 156 | chart.animateY(rm.getMap("animateY").getInt("duration")); 157 | } else if (rm.hasKey("animateXY")) { 158 | ReadableMap animationConfig = rm.getMap("animateXY"); 159 | chart.animateXY( 160 | animationConfig.getInt("durationX"), 161 | animationConfig.getInt("durationY") 162 | ); 163 | } else { 164 | chart.invalidate(); 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPPieChartManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.graphics.Color; 4 | 5 | import com.facebook.react.bridge.ReadableArray; 6 | import com.facebook.react.bridge.ReadableMap; 7 | import com.facebook.react.uimanager.annotations.ReactProp; 8 | import com.facebook.react.uimanager.ThemedReactContext; 9 | import com.github.mikephil.charting.charts.PieChart; 10 | import com.github.mikephil.charting.data.PieData; 11 | import com.github.mikephil.charting.data.PieDataSet; 12 | import com.github.mikephil.charting.data.Entry; 13 | import com.github.mikephil.charting.data.DataSet; 14 | import com.github.mikephil.charting.utils.ColorTemplate; 15 | import com.github.mikephil.charting.formatter.PercentFormatter; 16 | 17 | 18 | import java.util.ArrayList; 19 | import java.util.Random; 20 | 21 | 22 | public class MPPieChartManager extends MPPieRadarChartManager { 23 | private String CLASS_NAME="MPPieChart"; 24 | 25 | @Override 26 | public String getName() { 27 | return this.CLASS_NAME; 28 | } 29 | 30 | @Override 31 | protected PieChart createViewInstance(ThemedReactContext reactContext) { 32 | PieChart chart=new PieChart(reactContext); 33 | 34 | // initialise event listener to bind to chart 35 | new MPPieChartSelectionEventListener(chart); 36 | 37 | return chart; 38 | } 39 | 40 | // @Override 41 | // protected PieChart createViewInstance(ThemedReactContext reactContext) { 42 | // PieChart chart= new PieChart(reactContext); 43 | // return chart; 44 | // } 45 | 46 | @ReactProp(name = "holeRadius", defaultFloat = 50f) 47 | public void setHoleRadius(PieChart chart, float holeRadius){ 48 | chart.setHoleRadius(holeRadius); 49 | chart.invalidate(); 50 | } 51 | 52 | @ReactProp(name = "transparentCircleRadius", defaultFloat = 0f) 53 | public void setTransparentCircleRadius(PieChart chart, float transparentCircleRadius){ 54 | chart.setTransparentCircleRadius(transparentCircleRadius); 55 | chart.invalidate(); 56 | } 57 | 58 | @ReactProp(name="backgroundColor", defaultInt = Color.WHITE) 59 | public void setBackgroundColor(PieChart chart, int backgroundColor){ 60 | chart.setBackgroundColor(backgroundColor); 61 | chart.invalidate(); 62 | } 63 | 64 | @ReactProp(name="drawSliceText", defaultBoolean = false) 65 | public void setDrawSliceText(PieChart chart, boolean enabled){ 66 | chart.setDrawSliceText(enabled); 67 | chart.invalidate(); 68 | } 69 | 70 | @ReactProp(name="usePercentValues", defaultBoolean = true) 71 | public void setUsePercentValues(PieChart chart, boolean enabled){ 72 | chart.setUsePercentValues(enabled); 73 | chart.invalidate(); 74 | } 75 | 76 | @ReactProp(name="centerText") 77 | public void setCenterText(PieChart chart, String v){ 78 | chart.setCenterText(v); 79 | chart.invalidate(); 80 | } 81 | 82 | @ReactProp(name = "centerTextRadiusPercent", defaultFloat = 1.f) 83 | public void setCenterTextRadiusPercent(PieChart chart, float percent){ 84 | chart.setCenterTextRadiusPercent(percent); 85 | chart.invalidate(); 86 | } 87 | 88 | @ReactProp(name="data") 89 | public void setData(PieChart chart,ReadableMap rm){ 90 | 91 | ReadableArray xArray=rm.getArray("xValues"); 92 | ArrayList xVals=new ArrayList(); 93 | for(int m=0;m entries=new ArrayList(); 106 | for (int j=0;j colors = new ArrayList<>(); 119 | for(int c = 0; c < colorsArray.size(); c++){ 120 | colors.add(Color.parseColor(colorsArray.getString(c))); 121 | } 122 | dataSet.setColors(colors); 123 | }else 124 | if(config.hasKey("color")) { 125 | int[] colors=new int[]{Color.parseColor(config.getString("color"))}; 126 | dataSet.setColors(colors); 127 | } 128 | if(config.hasKey("drawValues")) dataSet.setDrawValues(config.getBoolean("drawValues")); 129 | if(config.hasKey("valueTextColors")){ 130 | ReadableArray colorsArray = config.getArray("valueTextColors"); 131 | ArrayList colors = new ArrayList<>(); 132 | for(int c = 0; c < colorsArray.size(); c++){ 133 | colors.add(Color.parseColor(colorsArray.getString(c))); 134 | } 135 | dataSet.setValueTextColors(colors); 136 | }else 137 | if(config.hasKey("valueTextColor")) dataSet.setValueTextColor(Color.parseColor(config.getString("valueTextColor"))); 138 | dataSet.setSliceSpace(3f); 139 | pieData.addDataSet(dataSet); 140 | 141 | } 142 | chart.setUsePercentValues(true); 143 | chart.setData(pieData); 144 | chart.invalidate(); 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPPieChartSelectionEventListener.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.view.MotionEvent; 4 | 5 | import com.facebook.react.bridge.Arguments; 6 | import com.facebook.react.bridge.WritableMap; 7 | import com.facebook.react.uimanager.ThemedReactContext; 8 | import com.facebook.react.uimanager.events.RCTEventEmitter; 9 | import com.github.mikephil.charting.charts.PieChart; 10 | import com.github.mikephil.charting.listener.OnChartValueSelectedListener; 11 | 12 | import com.github.mikephil.charting.data.Entry; 13 | import com.github.mikephil.charting.highlight.Highlight; 14 | 15 | 16 | /* 17 | * implement OnChartValueSelectedListener interface to bridge selection callback 18 | * events support 19 | * use eventName 'topSelect' mapping to 'onSelect' callback prop in JS 20 | */ 21 | public class MPPieChartSelectionEventListener implements OnChartValueSelectedListener { 22 | private PieChart chart=null; 23 | public MPPieChartSelectionEventListener(){ 24 | 25 | } 26 | public MPPieChartSelectionEventListener(PieChart chart){ 27 | this.chart=chart; 28 | 29 | // bind selection callback listener to chart 30 | this.chart.setOnChartValueSelectedListener(this); 31 | } 32 | 33 | @Override 34 | public void onValueSelected(Entry e, int dataSetIndex, Highlight h) { 35 | WritableMap event = Arguments.createMap(); 36 | event.putInt("xIndex", e.getXIndex()); 37 | event.putDouble("yValue", e.getVal()); 38 | 39 | ThemedReactContext reactContext = (ThemedReactContext)this.chart.getContext(); 40 | 41 | reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( 42 | this.chart.getId(), 43 | "topSelect", 44 | event 45 | ); 46 | } 47 | 48 | @Override 49 | public void onNothingSelected() { 50 | WritableMap event = Arguments.createMap(); 51 | 52 | // pass xIndex as -1 for representing no selection 53 | event.putInt("xIndex", -1); 54 | 55 | ThemedReactContext reactContext = (ThemedReactContext)this.chart.getContext(); 56 | 57 | reactContext.getJSModule(RCTEventEmitter.class).receiveEvent( 58 | this.chart.getId(), 59 | "topSelect", 60 | event 61 | ); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPPieRadarChartManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.graphics.Color; 4 | 5 | import com.facebook.react.bridge.ReadableArray; 6 | import com.facebook.react.bridge.ReadableMap; 7 | import com.facebook.react.uimanager.annotations.ReactProp; 8 | import com.facebook.react.uimanager.SimpleViewManager; 9 | import com.facebook.react.uimanager.ThemedReactContext; 10 | import com.github.mikephil.charting.charts.PieChart; 11 | import com.github.mikephil.charting.charts.PieRadarChartBase; 12 | import com.github.mikephil.charting.components.Legend; 13 | import com.github.mikephil.charting.data.Entry; 14 | import com.github.mikephil.charting.data.PieData; 15 | import com.github.mikephil.charting.data.PieDataSet; 16 | 17 | import java.util.ArrayList; 18 | import java.util.Random; 19 | 20 | /** 21 | * Created by Administrator on 2015/12/24. 22 | */ 23 | public class MPPieRadarChartManager extends SimpleViewManager { 24 | private String CLASS_NAME="PieRadarChart"; 25 | 26 | @Override 27 | public String getName() { 28 | return this.CLASS_NAME; 29 | } 30 | 31 | @Override 32 | protected PieRadarChartBase createViewInstance(ThemedReactContext reactContext) { 33 | PieChart chart = new PieChart(reactContext); 34 | return chart; 35 | } 36 | 37 | @ReactProp(name="touchEnabled",defaultBoolean = true) 38 | public void setTouchEnabled(PieRadarChartBase chart,boolean enable){ 39 | chart.setTouchEnabled(enable); 40 | } 41 | @ReactProp(name="dragEnabled",defaultBoolean = true) 42 | public void setDragEnabled(PieRadarChartBase chart,boolean enable){ 43 | chart.setTouchEnabled(enable); 44 | } 45 | 46 | @ReactProp(name="highlightPerTapEnabled",defaultBoolean = true) 47 | public void setHighlightPerTapEnabled(PieRadarChartBase chart,boolean enable){ 48 | chart.setHighlightPerTapEnabled(enable); 49 | } 50 | @ReactProp(name="dragDecelerationEnabled",defaultBoolean = true) 51 | public void setDragDecelerationEnabled(PieRadarChartBase chart,boolean enable){ 52 | chart.setDragDecelerationEnabled(enable); 53 | } 54 | 55 | @ReactProp(name="dragDecelerationFrictionCoef",defaultFloat = 0.50f) 56 | public void setDragDecelerationFrictionCoef(PieRadarChartBase chart,float v){ 57 | chart.setDragDecelerationFrictionCoef(v); 58 | } 59 | 60 | @ReactProp(name="description") 61 | public void setDescription(PieRadarChartBase chart,String v){ 62 | chart.setDescription(v); 63 | } 64 | @ReactProp(name="backgroundColor") 65 | public void setBackgroundColor(PieRadarChartBase chart,String v){ 66 | chart.setBackgroundColor(Color.parseColor(v)); 67 | } 68 | 69 | @ReactProp(name="chartPadding") 70 | public void setPadding(PieRadarChartBase chart,String v){ 71 | String[] padding=v.split(" "); 72 | if(padding.length==1){ 73 | int pad=(Integer.parseInt(padding[0])); 74 | chart.setPadding(pad,pad,pad,pad); 75 | }else if(padding.length==2){ 76 | int pad1=(Integer.parseInt(padding[0])); 77 | int pad2=(Integer.parseInt(padding[1])); 78 | chart.setPadding(pad2,pad1,pad2,pad1); 79 | }else if(padding.length==4){ 80 | int pad1=(Integer.parseInt(padding[0])); 81 | int pad2=(Integer.parseInt(padding[1])); 82 | int pad3=(Integer.parseInt(padding[0])); 83 | int pad4=(Integer.parseInt(padding[1])); 84 | chart.setPadding(pad4,pad1,pad2,pad3); 85 | } 86 | } 87 | @ReactProp(name="legend") 88 | public void setLegend(PieRadarChartBase chart,ReadableMap v){ 89 | Legend legend=chart.getLegend(); 90 | if(v.hasKey("enable")) legend.setEnabled(v.getBoolean("enable")); 91 | if(v.hasKey("position")) legend.setPosition(Legend.LegendPosition.valueOf(v.getString("position"))); 92 | if(v.hasKey("direction")) legend.setDirection(Legend.LegendDirection.valueOf(v.getString("direction"))); 93 | 94 | if(v.hasKey("legendForm")) legend.setForm(Legend.LegendForm.valueOf(v.getString("legendForm"))); 95 | if(v.hasKey("wordWrap")) legend.setWordWrapEnabled(v.getBoolean("wordWrap")); 96 | 97 | if(v.hasKey("textColor")) legend.setTextColor(Color.parseColor(v.getString("textColor"))); 98 | if(v.hasKey("textSize")) legend.setTextSize((float) v.getDouble("textSize")); 99 | if(v.hasKey("xOffset")) legend.setXOffset((float) v.getDouble("xOffset")); 100 | if(v.hasKey("yOffset")) legend.setYOffset((float) v.getDouble("yOffset")); 101 | 102 | if(v.hasKey("custom")){ 103 | ReadableMap custom=v.getMap("custom"); 104 | ReadableArray colors=custom.getArray("colors"); 105 | ReadableArray labels=custom.getArray("labels"); 106 | if(colors.size()==labels.size()) { 107 | int[] cols = new int[colors.size()]; 108 | String[] labs = new String[colors.size()]; 109 | for (int j = 0; j < colors.size(); j++) { 110 | cols[j] = Color.parseColor(colors.getString(j)); 111 | labs[j] = labels.getString(j); 112 | } 113 | legend.setCustom(cols,labs); 114 | } 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MPRadarChartManager.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.graphics.Color; 4 | import android.graphics.Typeface; 5 | 6 | import com.facebook.react.bridge.ReadableArray; 7 | import com.facebook.react.bridge.ReadableMap; 8 | import com.facebook.react.uimanager.annotations.ReactProp; 9 | import com.facebook.react.uimanager.ThemedReactContext; 10 | import com.github.mikephil.charting.charts.RadarChart; 11 | import com.github.mikephil.charting.data.RadarData; 12 | import com.github.mikephil.charting.data.RadarDataSet; 13 | import com.github.mikephil.charting.data.Entry; 14 | import com.github.mikephil.charting.data.DataSet; 15 | import com.github.mikephil.charting.utils.ColorTemplate; 16 | import com.github.mikephil.charting.interfaces.datasets.IDataSet; 17 | import com.github.mikephil.charting.interfaces.datasets.IRadarDataSet; 18 | 19 | import java.util.ArrayList; 20 | import java.util.Random; 21 | 22 | 23 | public class MPRadarChartManager extends MPPieRadarChartManager { 24 | private String CLASS_NAME="MPRadarChart"; 25 | 26 | @Override 27 | public String getName() { 28 | return this.CLASS_NAME; 29 | } 30 | 31 | @Override 32 | protected RadarChart createViewInstance(ThemedReactContext reactContext) { 33 | RadarChart chart=new RadarChart(reactContext); 34 | 35 | // initialise event listener to bind to chart 36 | // TODO: is it need to move to MPRadarChartSelectionEventListener? 37 | //new MPPieChartSelectionEventListener(chart); 38 | 39 | return chart; 40 | } 41 | 42 | // @Override 43 | // protected PieChart createViewInstance(ThemedReactContext reactContext) { 44 | // PieChart chart= new PieChart(reactContext); 45 | // return chart; 46 | // } 47 | 48 | @ReactProp(name="webLineWidth",defaultFloat=0.5f) 49 | public void setWebLineWidth(RadarChart chart,float webLineWidth){ 50 | chart.setWebLineWidth(webLineWidth); 51 | chart.invalidate(); 52 | } 53 | 54 | @ReactProp(name="webLineWidthInner",defaultFloat=0.3f) 55 | public void setWebLineWidthInner(RadarChart chart,float webLineWidthInner){ 56 | chart.setWebLineWidthInner(webLineWidthInner); 57 | chart.invalidate(); 58 | } 59 | 60 | @ReactProp(name="webAlpha",defaultInt=0) 61 | public void setWebAlpha(RadarChart chart,int webAlpha){ 62 | chart.setWebAlpha(webAlpha); 63 | chart.invalidate(); 64 | } 65 | 66 | @ReactProp(name="webColor",defaultInt=1) 67 | public void setWebColor(RadarChart chart, int webColor){ 68 | chart.setWebColor(webColor); 69 | chart.invalidate(); 70 | } 71 | 72 | @ReactProp(name="webColorInner",defaultInt=1) 73 | public void setWebColorInner(RadarChart chart,int webColorInner){ 74 | chart.setWebColorInner(webColorInner); 75 | chart.invalidate(); 76 | } 77 | 78 | @ReactProp(name="drawWeb",defaultBoolean=false) 79 | public void setDrawWeb(RadarChart chart,boolean drawWeb){ 80 | chart.setDrawWeb(drawWeb); 81 | chart.invalidate(); 82 | } 83 | 84 | @ReactProp(name="skipWebLineCount",defaultInt=0) 85 | public void setSkipWebLineCount(RadarChart chart,int skipWebLineCount){ 86 | chart.setSkipWebLineCount(skipWebLineCount); 87 | chart.invalidate(); 88 | } 89 | 90 | @ReactProp(name="data") 91 | public void setData(RadarChart chart,ReadableMap rm){ 92 | 93 | String name=rm.getString("name"); 94 | ReadableArray mdata=rm.getArray("data"); 95 | ReadableArray parties=rm.getArray("parties"); 96 | ArrayList yVals = new ArrayList(); 97 | String[] mParties = new String[parties.size()]; 98 | // Adding Parties String 99 | if(mdata.size()!=parties.size()){ 100 | 101 | } 102 | for (int m=0;m xVals = new ArrayList(); 106 | for (int i = 0; i < parties.size(); i++) 107 | xVals.add(mParties[i % mParties.length]); 108 | 109 | // Adding Data 110 | for (int n=0;n sets = new ArrayList(); 122 | sets.add(set); 123 | 124 | RadarData data = new RadarData(xVals, sets); 125 | data.setValueTextSize(8f); 126 | data.setDrawValues(true); 127 | chart.getYAxis().setEnabled(false); 128 | chart.setData(data); 129 | 130 | chart.invalidate(); 131 | 132 | 133 | /* 134 | float mult = 150; 135 | int cnt = 9; 136 | ArrayList yVals1 = new ArrayList(); 137 | ArrayList yVals2 = new ArrayList(); 138 | String[] mParties = new String[]{ 139 | "Party A", "Party B", "Party C", "Party D", "Party E", "Party F", "Party G", "Party H", 140 | "Party I"}; 141 | // IMPORTANT: In a PieChart, no values (Entry) should have the same 142 | // xIndex (even if from different DataSets), since no values can be 143 | // drawn above each other. 144 | for (int i = 0; i < cnt; i++) { 145 | yVals1.add(new Entry((float) (Math.random() * mult) + mult / 2, i)); 146 | } 147 | 148 | for (int i = 0; i < cnt; i++) { 149 | yVals2.add(new Entry((float) (Math.random() * mult) + mult / 2, i)); 150 | } 151 | 152 | ArrayList xVals = new ArrayList(); 153 | 154 | for (int i = 0; i < cnt; i++) 155 | xVals.add(mParties[i % mParties.length]); 156 | 157 | RadarDataSet set1 = new RadarDataSet(yVals1, "Set 1"); 158 | set1.setColor(ColorTemplate.VORDIPLOM_COLORS[0]); 159 | set1.setFillColor(ColorTemplate.VORDIPLOM_COLORS[0]); 160 | set1.setDrawFilled(true); 161 | set1.setLineWidth(2f); 162 | 163 | RadarDataSet set2 = new RadarDataSet(yVals2, "Set 2"); 164 | set2.setColor(ColorTemplate.VORDIPLOM_COLORS[4]); 165 | set2.setFillColor(ColorTemplate.VORDIPLOM_COLORS[4]); 166 | set2.setDrawFilled(true); 167 | set2.setLineWidth(2f); 168 | 169 | ArrayList sets = new ArrayList(); 170 | sets.add(set1); 171 | sets.add(set2); 172 | 173 | RadarData data = new RadarData(xVals, sets); 174 | data.setValueTextSize(8f); 175 | data.setDrawValues(false); 176 | 177 | chart.setData(data); 178 | 179 | chart.invalidate(); 180 | */ 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/MainActivity.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import android.os.Bundle; 4 | import android.support.design.widget.FloatingActionButton; 5 | import android.support.design.widget.Snackbar; 6 | import android.support.v7.app.AppCompatActivity; 7 | import android.support.v7.widget.Toolbar; 8 | import android.view.View; 9 | 10 | public class MainActivity extends AppCompatActivity { 11 | 12 | @Override 13 | protected void onCreate(Bundle savedInstanceState) { 14 | super.onCreate(savedInstanceState); 15 | setContentView(R.layout.activity_main); 16 | Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 17 | setSupportActionBar(toolbar); 18 | 19 | FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 20 | fab.setOnClickListener(new View.OnClickListener() { 21 | @Override 22 | public void onClick(View view) { 23 | Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 24 | .setAction("Action", null).show(); 25 | } 26 | }); 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /android/src/main/java/cn/mandata/react_native_mpchart/PrintfValueFormatter.java: -------------------------------------------------------------------------------- 1 | package cn.mandata.react_native_mpchart; 2 | 3 | import com.github.mikephil.charting.data.Entry; 4 | import com.github.mikephil.charting.formatter.ValueFormatter; 5 | import com.github.mikephil.charting.utils.ViewPortHandler; 6 | 7 | import android.util.Log; 8 | 9 | public class PrintfValueFormatter implements ValueFormatter { 10 | 11 | private String format = ""; 12 | 13 | public PrintfValueFormatter(String format){ 14 | if(format != null) this.format = format; 15 | } 16 | 17 | @Override 18 | public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { 19 | return String.format(format, value); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /android/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 14 | 15 | 21 | 22 | 23 | 24 | 25 | 26 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /android/src/main/res/layout/content_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 14 | 15 | 23 | 24 | 32 | 33 | -------------------------------------------------------------------------------- /android/src/main/res/menu/menu_main.xml: -------------------------------------------------------------------------------- 1 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /android/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hongyin163/react-native-chart-android/eeba3aced601eafe34bad33f784ea55bf81f0fa6/android/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hongyin163/react-native-chart-android/eeba3aced601eafe34bad33f784ea55bf81f0fa6/android/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hongyin163/react-native-chart-android/eeba3aced601eafe34bad33f784ea55bf81f0fa6/android/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hongyin163/react-native-chart-android/eeba3aced601eafe34bad33f784ea55bf81f0fa6/android/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hongyin163/react-native-chart-android/eeba3aced601eafe34bad33f784ea55bf81f0fa6/android/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/values-v21/styles.xml: -------------------------------------------------------------------------------- 1 | > 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /android/src/main/res/values-w820dp/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 64dp 6 | 7 | -------------------------------------------------------------------------------- /android/src/main/res/values/attrs_chart_view.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3F51B5 4 | #303F9F 5 | #FF4081 6 | 7 | -------------------------------------------------------------------------------- /android/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16dp 4 | 16dp 5 | 16dp 6 | 7 | -------------------------------------------------------------------------------- /android/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | react-native-mpchart 3 | Settings 4 | MainActivity 5 | 6 | -------------------------------------------------------------------------------- /android/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 15 | 16 |