├── sample
├── chart1.JPG
├── chart2.JPG
├── TitleBar.js
├── Button.js
├── RadarChart.js
├── CombinedChart.js
├── Index.js
├── LineChart.js
├── BarChart.js
└── CandleChart.js
├── android
├── libs
│ └── mpandroidchartlibrary-2-2-4.jar
├── src
│ ├── main
│ │ ├── res
│ │ │ ├── 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
│ │ │ │ ├── strings.xml
│ │ │ │ ├── colors.xml
│ │ │ │ ├── dimens.xml
│ │ │ │ ├── attrs_chart_view.xml
│ │ │ │ └── styles.xml
│ │ │ ├── values-v21
│ │ │ │ └── styles.xml
│ │ │ ├── values-w820dp
│ │ │ │ └── dimens.xml
│ │ │ ├── menu
│ │ │ │ └── menu_main.xml
│ │ │ └── layout
│ │ │ │ ├── content_main.xml
│ │ │ │ └── activity_main.xml
│ │ ├── java
│ │ │ └── cn
│ │ │ │ └── mandata
│ │ │ │ └── react_native_mpchart
│ │ │ │ ├── CustomYAxisValueFormatter.java
│ │ │ │ ├── PrintfValueFormatter.java
│ │ │ │ ├── MPHorizontalBarChartManager.java
│ │ │ │ ├── ChartViewManager.java
│ │ │ │ ├── MainActivity.java
│ │ │ │ ├── MPChartPackage.java
│ │ │ │ ├── MPChartEventListener.java
│ │ │ │ ├── MPChartSelectionEventListener.java
│ │ │ │ ├── MPPieChartSelectionEventListener.java
│ │ │ │ ├── MPCandleStickChartManager.java
│ │ │ │ ├── MPPieRadarChartManager.java
│ │ │ │ ├── MPBarChartManager.java
│ │ │ │ ├── MPPieChartManager.java
│ │ │ │ ├── MPRadarChartManager.java
│ │ │ │ ├── ChartView.java
│ │ │ │ ├── MPLineChartManager.java
│ │ │ │ ├── MPCombinedChartManager.java
│ │ │ │ └── MPBarLineChartManager.java
│ │ └── AndroidManifest.xml
│ ├── test
│ │ └── java
│ │ │ └── cn
│ │ │ └── mandata
│ │ │ └── react_native_mpchart
│ │ │ └── ExampleUnitTest.java
│ └── androidTest
│ │ └── java
│ │ └── cn
│ │ └── mandata
│ │ └── react_native_mpchart
│ │ └── ApplicationTest.java
├── proguard-rules.pro
└── build.gradle
├── index.js
├── HorizontalBarChart.js
├── .gitignore
├── .npmignore
├── package.json
├── RadarChart.js
├── PieChart.js
├── LineChart.js
├── BarChart.js
├── CandleStickChart.js
├── CombinedChart.js
└── README.md
/sample/chart1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hongyin163/react-native-chart-android/HEAD/sample/chart1.JPG
--------------------------------------------------------------------------------
/sample/chart2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hongyin163/react-native-chart-android/HEAD/sample/chart2.JPG
--------------------------------------------------------------------------------
/android/libs/mpandroidchartlibrary-2-2-4.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hongyin163/react-native-chart-android/HEAD/android/libs/mpandroidchartlibrary-2-2-4.jar
--------------------------------------------------------------------------------
/android/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hongyin163/react-native-chart-android/HEAD/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/HEAD/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/HEAD/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/HEAD/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/HEAD/android/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | react-native-mpchart
3 | Settings
4 | MainActivity
5 |
6 |
--------------------------------------------------------------------------------
/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/attrs_chart_view.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/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/test/java/cn/mandata/react_native_mpchart/ExampleUnitTest.java:
--------------------------------------------------------------------------------
1 | package cn.mandata.react_native_mpchart;
2 |
3 | import org.junit.Test;
4 |
5 | import static org.junit.Assert.*;
6 |
7 | /**
8 | * To work on unit tests, switch the Test Artifact in the Build Variants view.
9 | */
10 | public class ExampleUnitTest {
11 | @Test
12 | public void addition_isCorrect() throws Exception {
13 | assertEquals(4, 2 + 2);
14 | }
15 | }
--------------------------------------------------------------------------------
/android/src/main/res/menu/menu_main.xml:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import BarChart from './BarChart';
2 | import HorizontalBarChart from './HorizontalBarChart';
3 | import LineChart from './LineChart';
4 | import CandleStickChart from './CandleStickChart';
5 | import CombinedChart from './CombinedChart';
6 | import PieChart from './PieChart';
7 | import RadarChart from './RadarChart';
8 |
9 | export {
10 | BarChart,
11 | HorizontalBarChart,
12 | LineChart,
13 | CandleStickChart,
14 | CombinedChart,
15 | PieChart,
16 | RadarChart
17 | }
18 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/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/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
11 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/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/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/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/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/sample/TitleBar.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 | var Button=require('./Button');
6 | var {
7 | StyleSheet,
8 | View,
9 | NativeAppEventEmitter
10 | } = React;
11 |
12 | var Component = React.createClass({
13 | onBack:function (argument) {
14 | NativeAppEventEmitter.emit('back');
15 | },
16 | render: function() {
17 | return (
18 |
19 |
21 | );
22 | }
23 | });
24 |
25 |
26 | var styles = StyleSheet.create({
27 | container:{
28 | height:50,
29 | justifyContent:'flex-start',
30 | borderBottomWidth:1,
31 | borderBottomColor:'#e5e5e5'
32 | },
33 | button:{
34 | width:80
35 | }
36 | });
37 |
38 |
39 | module.exports = Component;
40 |
--------------------------------------------------------------------------------
/android/src/main/java/cn/mandata/react_native_mpchart/MPHorizontalBarChartManager.java:
--------------------------------------------------------------------------------
1 | package cn.mandata.react_native_mpchart;
2 |
3 | import com.facebook.react.uimanager.ThemedReactContext;
4 | import com.github.mikephil.charting.charts.HorizontalBarChart;
5 |
6 | import java.util.ArrayList;
7 | import java.util.Random;
8 |
9 | public class MPHorizontalBarChartManager extends MPBarChartManager {
10 | private String CLASS_NAME="MPHorizontalBarChart";
11 |
12 | @Override
13 | public String getName() {
14 | return this.CLASS_NAME;
15 | }
16 |
17 | @Override
18 | protected HorizontalBarChart createViewInstance(ThemedReactContext reactContext) {
19 | HorizontalBarChart chart=new HorizontalBarChart(reactContext);
20 | new MPChartSelectionEventListener(chart);
21 | return chart;
22 | }
23 |
24 | }
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-chart-android",
3 | "version": "1.0.8",
4 | "description": "react-native-mpchart provide modules to add chart to android,all charts are come from mpandroidchart library.",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/hongyin163/react-native-chart-android.git"
12 | },
13 | "keywords": [
14 | "chart",
15 | "mpandroidchart"
16 | ],
17 | "author": "hongyin163",
18 | "license": "MIT",
19 | "bugs": {
20 | "url": "https://github.com/hongyin163/react-native-chart-android/issues"
21 | },
22 | "homepage": "https://github.com/hongyin163/react-native-chart-android#readme",
23 | "dependencies": {
24 | "prop-types": "^15.5.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/sample/Button.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 |
6 | var {
7 | StyleSheet,
8 | View,
9 | TouchableOpacity,
10 | Text
11 | } = React;
12 |
13 | var Button = React.createClass({
14 | onPress:function (argument) {
15 | this.props.onPress&&this.props.onPress();
16 | },
17 | render: function() {
18 | return (
19 |
20 |
21 | {this.props.text}
22 |
23 |
24 | );
25 | }
26 | });
27 |
28 |
29 | var styles = StyleSheet.create({
30 | button:{
31 | height:50,
32 | justifyContent:'center',
33 | alignItems: 'center',
34 | borderBottomWidth:1,
35 | borderBottomColor:'#e5e5e5'
36 | }
37 | });
38 |
39 |
40 | module.exports = Button;
41 |
--------------------------------------------------------------------------------
/sample/RadarChart.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 | var TitleBar=require('./TitleBar');
6 | var {
7 | BarChart,
8 | CombinedChart
9 | }=require('../index.android');
10 | var {
11 | StyleSheet,
12 | View,
13 | Text
14 | } = React;
15 |
16 | var Component = React.createClass({
17 | getRadarData:function (argument) {
18 | var radarData={
19 | name:'2016-11-4',
20 | data:[0.5,0.6,0.7,0.4,0.55],
21 | parties:['Sugar','Carl','Vitamin','Water','Others'],
22 | };
23 | return radarData;
24 | },
25 | render: function() {
26 | return (
27 |
28 |
29 |
34 |
35 |
36 | );
37 | }
38 | });
39 |
40 | var styles = StyleSheet.create({
41 | container:{
42 | flex:1
43 | },
44 | chartContainer:{
45 | flex:1
46 | },
47 | chart:{
48 | flex:1
49 | }
50 | });
51 |
52 | module.exports = Component;
53 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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/src/main/res/layout/content_main.xml:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
23 |
24 |
32 |
33 |
--------------------------------------------------------------------------------
/android/src/main/java/cn/mandata/react_native_mpchart/MPChartPackage.java:
--------------------------------------------------------------------------------
1 | package cn.mandata.react_native_mpchart;
2 |
3 | import com.facebook.react.ReactPackage;
4 | import com.facebook.react.bridge.JavaScriptModule;
5 | import com.facebook.react.bridge.NativeModule;
6 | import com.facebook.react.bridge.ReactApplicationContext;
7 | import com.facebook.react.uimanager.ViewManager;
8 |
9 | import java.util.ArrayList;
10 | import java.util.Arrays;
11 | import java.util.Collections;
12 | import java.util.List;
13 |
14 | /**
15 | * Created by Administrator on 2015/11/6.
16 | */
17 | public class MPChartPackage implements ReactPackage {
18 |
19 | @Override
20 | public List 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/res/layout/activity_main.xml:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
14 |
15 |
21 |
22 |
23 |
24 |
25 |
26 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/sample/CombinedChart.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 | var TitleBar=require('./TitleBar');
6 | var {
7 | CombinedChart
8 | }=require('../index.android');
9 | var {
10 | StyleSheet,
11 | View,
12 | Text
13 | } = React;
14 |
15 | var Component = React.createClass({
16 | getData:function (argument) {
17 | var data={
18 | xValues:['1','2','3'],
19 | yValues:[
20 | {
21 | data:[4.0,5.0,6.0],
22 | label:'test1',
23 | config:{
24 | color:'blue'
25 | }
26 | }
27 | ]
28 | };
29 | return data;
30 | },
31 | getRandomData:function (argument) {
32 | var data={};
33 | data['xValues']=[];
34 | data['yValues']=[
35 | {
36 | data:[],
37 | label:'test1',
38 | config:{
39 | color:'blue'
40 | }
41 | }
42 | ];
43 | for (var i = 0; i < 500; i++) {
44 | data.xValues.push(i+'');
45 | data.yValues[0].data.push(Math.random()*100);
46 | };
47 | return data;
48 | },
49 | render: function() {
50 | return (
51 |
52 |
53 |
54 |
66 |
67 |
68 |
69 |
70 |
71 | );
72 | }
73 | });
74 |
75 | var styles = StyleSheet.create({
76 | container:{
77 | flex:1
78 | },
79 | chartContainer:{
80 | flex:1
81 | },
82 | chart:{
83 | flex:1
84 | }
85 | });
86 |
87 |
88 | module.exports = Component;
89 |
--------------------------------------------------------------------------------
/android/src/main/java/cn/mandata/react_native_mpchart/MPChartEventListener.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.BarLineChartBase;
10 | import com.github.mikephil.charting.listener.ChartTouchListener;
11 | import com.github.mikephil.charting.listener.OnChartGestureListener;
12 |
13 | /**
14 | * Created by Administrator on 2015/12/24.
15 | */
16 | public class MPChartEventListener implements OnChartGestureListener {
17 | private BarLineChartBase chart=null;
18 | public MPChartEventListener(){
19 |
20 | }
21 | public MPChartEventListener(BarLineChartBase chart){
22 | this.chart=chart;
23 | }
24 |
25 | @Override
26 | public void onChartGestureStart(MotionEvent motionEvent, ChartTouchListener.ChartGesture chartGesture) {
27 | WritableMap event = Arguments.createMap();
28 | ((ThemedReactContext)this.chart.getContext()).getJSModule(RCTEventEmitter.class).receiveEvent(
29 | this.chart.getId(),
30 | "topLoadingStart",
31 | event);
32 | }
33 |
34 | @Override
35 | public void onChartGestureEnd(MotionEvent motionEvent, ChartTouchListener.ChartGesture chartGesture) {
36 |
37 | }
38 |
39 | @Override
40 | public void onChartLongPressed(MotionEvent motionEvent) {
41 |
42 | }
43 |
44 | @Override
45 | public void onChartDoubleTapped(MotionEvent motionEvent) {
46 |
47 | }
48 |
49 | @Override
50 | public void onChartSingleTapped(MotionEvent motionEvent) {
51 |
52 | }
53 |
54 | @Override
55 | public void onChartFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) {
56 |
57 | }
58 |
59 | @Override
60 | public void onChartScale(MotionEvent motionEvent, float v, float v1) {
61 |
62 | }
63 |
64 | @Override
65 | public void onChartTranslate(MotionEvent motionEvent, float v, float v1) {
66 |
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/sample/Index.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 | var BarChart=require('./BarChart');
6 | var LineChart=require('./LineChart');
7 | var CandleChart=require('./CandleChart');
8 | var CombinedChart=require('./CombinedChart');
9 | var Button=require('./Button');
10 | var {
11 | StyleSheet,
12 | View,
13 | TouchableOpacity,
14 | Text,
15 | Navigator,
16 | NativeAppEventEmitter
17 | } = React;
18 |
19 |
20 |
21 |
22 | var Component = React.createClass({
23 | onBack:function (argument) {
24 | this._nav.pop();
25 | },
26 | componentWillMount: function() {
27 | var me=this;
28 | NativeAppEventEmitter.addListener('back', this.onBack);
29 | },
30 | renderScene:function (route, navigator) {
31 | switch(route.name){
32 | case "main":
33 | return(
34 |
35 |
40 | );
41 | break;
42 | case "bar":
43 | return ()
44 | break;
45 | case "line":
46 | return ()
47 | break;
48 | case "candle":
49 | return ()
50 | break;
51 | case "combined":
52 | return ()
53 | break;
54 | }
55 | },
56 | bindSelect:function (name) {
57 | var me=this;
58 | return function(){
59 | me.onSelect(name);
60 | };
61 | },
62 | onSelect:function (name) {
63 | this._nav.push({name:name})
64 | },
65 | render: function() {
66 | return (
67 | this._nav=n}
69 | debugOverlay={false}
70 | style={{flex:1}}
71 | configureScene={(route) =>Navigator.SceneConfigs.PushFromRight}
72 | initialRoute={{name:'main'}}
73 | renderScene={this.renderScene}/>
74 |
75 | );
76 | }
77 | });
78 |
79 |
80 | var styles = StyleSheet.create({
81 | container:{
82 | flex:1
83 | }
84 | });
85 |
86 |
87 | module.exports = Component;
88 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/sample/LineChart.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 | var TitleBar=require('./TitleBar');
6 | var {
7 | LineChart
8 | }=require('../index.android');
9 | var {
10 | StyleSheet,
11 | View,
12 | Text
13 | } = React;
14 |
15 | var Component = React.createClass({
16 | getLineData:function (argument) {
17 | var data={
18 | xValues:['1','2','3'],
19 | yValues:[
20 | {
21 | data:[1.0,5.0,6.0],
22 | label:'test1',
23 | config:{
24 | color:'blue'
25 | }
26 | },
27 | {
28 | data:[3.0,15.0,22],
29 | label:'test2',
30 | config:{
31 | color:'red'
32 | }
33 | },
34 | {
35 | data:[7,12,22],
36 | label:'test2',
37 | config:{
38 | color:'yellow'
39 | }
40 | }
41 | ]
42 | };
43 | return data;
44 | },
45 | getRandomData:function (argument) {
46 | var data={};
47 | data['xValues']=[];
48 | data['yValues']=[
49 | {
50 | data:[],
51 | label:'test1',
52 | config:{
53 | color:'blue'
54 | }
55 | }
56 | ];
57 | for (var i = 0; i < 500; i++) {
58 | data.xValues.push(i+'');
59 | data.yValues[0].data.push(Math.random()*100);
60 | };
61 | return data;
62 | },
63 | render: function() {
64 | return (
65 |
66 |
67 |
68 |
69 |
82 |
83 |
84 | );
85 | }
86 | });
87 |
88 | var styles = StyleSheet.create({
89 | container:{
90 | flex:1
91 | },
92 | chartContainer:{
93 | flex:1
94 | },
95 | chart:{
96 | flex:1
97 | }
98 | });
99 |
100 |
101 | module.exports = Component;
102 |
--------------------------------------------------------------------------------
/sample/BarChart.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 | 'use strict';
3 |
4 | var React = require('react-native');
5 | var TitleBar=require('./TitleBar');
6 | var {
7 | BarChart,
8 | CombinedChart
9 | }=require('../index.android');
10 | var {
11 | StyleSheet,
12 | View,
13 | Text
14 | } = React;
15 |
16 | var Component = React.createClass({
17 | getBarData:function (argument) {
18 | var data={
19 | xValues:['1','2','3'],
20 | yValues:[
21 | {
22 | data:[4.0,5.0,6.0],
23 | label:'test1',
24 | config:{
25 | color:'blue'
26 | }
27 | },
28 | {
29 | data:[4.0,5.0,6.0],
30 | label:'test2',
31 | config:{
32 | color:'red'
33 | }
34 | },
35 | {
36 | data:[4.0,5.0,6.0],
37 | label:'test2',
38 | config:{
39 | color:'yellow'
40 | }
41 | }
42 | ]
43 | };
44 | return data;
45 | },
46 | getRandomData:function (argument) {
47 | var data={};
48 | data['xValues']=[];
49 | data['yValues']=[
50 | {
51 | data:[],
52 | label:'test1',
53 | config:{
54 | color:'blue'
55 | }
56 | }
57 | ];
58 | for (var i = 0; i < 500; i++) {
59 | data.xValues.push(i+'');
60 | data.yValues[0].data.push(Math.random()*100);
61 | };
62 | return data;
63 | },
64 | render: function() {
65 | return (
66 |
67 |
68 |
69 |
70 |
83 |
84 |
85 | );
86 | }
87 | });
88 |
89 | var styles = StyleSheet.create({
90 | container:{
91 | flex:1
92 | },
93 | chartContainer:{
94 | flex:1
95 | },
96 | chart:{
97 | flex:1
98 | }
99 | });
100 |
101 |
102 | module.exports = Component;
103 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/android/src/main/java/cn/mandata/react_native_mpchart/MPCandleStickChartManager.java:
--------------------------------------------------------------------------------
1 | package cn.mandata.react_native_mpchart;
2 |
3 | import android.graphics.Color;
4 | import android.graphics.Paint;
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.SimpleViewManager;
10 | import com.facebook.react.uimanager.ThemedReactContext;
11 | import com.github.mikephil.charting.charts.BarChart;
12 | import com.github.mikephil.charting.charts.BarLineChartBase;
13 | import com.github.mikephil.charting.charts.CandleStickChart;
14 | import com.github.mikephil.charting.charts.LineChart;
15 | import com.github.mikephil.charting.components.AxisBase;
16 | import com.github.mikephil.charting.components.LimitLine;
17 | import com.github.mikephil.charting.components.YAxis;
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.CandleData;
22 | import com.github.mikephil.charting.data.CandleDataSet;
23 | import com.github.mikephil.charting.data.CandleEntry;
24 | import com.github.mikephil.charting.data.DataSet;
25 | import com.github.mikephil.charting.data.Entry;
26 | import com.github.mikephil.charting.data.LineData;
27 | import com.github.mikephil.charting.data.LineDataSet;
28 | import com.github.mikephil.charting.utils.ColorTemplate;
29 |
30 | import java.util.ArrayList;
31 | import java.util.Random;
32 |
33 | import cn.mandata.react_native_mpchart.MPBarLineChartManager;
34 |
35 | /**
36 | * Created by Administrator on 2015/11/6.
37 | */
38 | public class MPCandleStickChartManager extends MPBarLineChartManager {
39 | private String CLASS_NAME="MPCandleStickChart";
40 | private Random random;//用于产生随机数
41 |
42 | private LineChart chart;
43 | private LineData data;
44 | private LineDataSet dataSet;
45 | @Override
46 | public String getName() {
47 | return this.CLASS_NAME;
48 | }
49 |
50 | @Override
51 | protected CandleStickChart createViewInstance(ThemedReactContext reactContext) {
52 | CandleStickChart chart=new CandleStickChart(reactContext);
53 | return chart;
54 | }
55 |
56 | //{Data:[[0,1,2,3,4,5,6],[],[]],Label:""}
57 | //
58 | // e[0],日期
59 | // e[1],开盘
60 | // e[2],收盘
61 | // e[3],最高
62 | // e[4],最低
63 | // e[5],成交量
64 | // e[6],涨跌额
65 | // e[7],涨跌幅
66 | @ReactProp(name="data")
67 | public void setData(CandleStickChart chart,ReadableMap rm){
68 | String label=rm.getString("Label");
69 | ReadableArray xArray=rm.getArray("Data");
70 | ArrayList xVals=new ArrayList();
71 | for(int m=0;m entries=new ArrayList();
76 | for(int i=0;i {
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/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/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 |
--------------------------------------------------------------------------------
/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 | 
204 |
205 | 
206 |
207 | There are some samples in sample folder,you can download them and try to run them.
208 | ## License
209 | MIT
210 |
--------------------------------------------------------------------------------
/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/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/MPLineChartManager.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.charts.LineChart;
13 | import com.github.mikephil.charting.components.AxisBase;
14 | import com.github.mikephil.charting.components.LimitLine;
15 | import com.github.mikephil.charting.components.YAxis;
16 | import com.github.mikephil.charting.data.BarData;
17 | import com.github.mikephil.charting.data.BarDataSet;
18 | import com.github.mikephil.charting.data.BarEntry;
19 | import com.github.mikephil.charting.data.DataSet;
20 | import com.github.mikephil.charting.data.Entry;
21 | import com.github.mikephil.charting.data.LineData;
22 | import com.github.mikephil.charting.data.LineDataSet;
23 | import com.github.mikephil.charting.utils.ColorTemplate;
24 | import com.github.mikephil.charting.components.YAxis.AxisDependency;
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 MPLineChartManager extends MPBarLineChartManager {
33 | private String CLASS_NAME="MPLineChart";
34 | private Random random;//用于产生随机数
35 |
36 | private LineChart chart;
37 | private LineData data;
38 | private LineDataSet dataSet;
39 | @Override
40 | public String getName() {
41 | return this.CLASS_NAME;
42 | }
43 |
44 | @Override
45 | protected LineChart createViewInstance(ThemedReactContext reactContext) {
46 | LineChart chart=new LineChart(reactContext);
47 |
48 | // initialise event listener to bind to chart
49 | new MPChartSelectionEventListener(chart);
50 |
51 | return chart;
52 | }
53 |
54 | //{XValues:[],YValues:[{Data:[],Label:""},{}]}
55 | @ReactProp(name="data")
56 | public void setData(LineChart chart,ReadableMap rm){
57 |
58 | ReadableArray xArray=rm.getArray("xValues");
59 | ArrayList 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/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 {
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= c1) {
24 | var n = 0;
25 | for (var j = 0; j < c1; j++) {
26 | n += data[i - j][2];
27 | }
28 | v = n / c1;
29 | return v;
30 | } else {
31 | return data[i][2];
32 | }
33 | }
34 | dayData.forEach(function (e,i) {
35 | kdata.push([
36 | e[0],
37 | e[1],//开盘
38 | e[2],//收盘
39 | e[3],//最高
40 | e[4],//最低
41 | e[5],//成交量
42 | (e[6]||0),//涨跌额
43 | (e[7]||0),//涨跌幅
44 | _getAvg(c1, dayData, i),//移动平均线1
45 | _getAvg(c2, dayData, i),//移动平均线2
46 | _getAvg(c3, dayData, i),//移动平均线3
47 | _getAvg(c4, dayData, i)//移动平均线4
48 | ]);
49 | });
50 | return kdata;
51 | },
52 | getCandleData:function (argument) {
53 | var kdata={
54 | data:this.getPriceData().slice(80,200),
55 | label:"",
56 | config:{
57 | visbleRange:[0,50],
58 | color:'WHITE',
59 | shadowColor:"GRAY",
60 | shadowWidth:1,
61 | decreasingColor:'#006030',
62 | decreasingPaintStyle:"FILL",
63 | increasingColor:'#A50B31',
64 | increasingPaintStyle:"FILL"
65 | }
66 | }
67 | return kdata;
68 | },
69 | getAvgData:function (argument) {
70 | var avgData={
71 | xValues:[],
72 | yValues:[
73 | {
74 | data:[],
75 | label:"5",
76 | config:{
77 | drawCircles:false,
78 | color:'#FF0080'
79 | }
80 | },
81 | {
82 | data:[],
83 | label:"10",
84 | config:{
85 | drawCircles:false,
86 | color:'#E1E100'
87 | }
88 | },
89 | {
90 | data:[],
91 | label:"20",
92 | config:{
93 | drawCircles:false,
94 | color:'#3D7878'
95 | }
96 | },
97 | {
98 | data:[],
99 | label:"60",
100 | config:{
101 | drawCircles:false,
102 | color:'#FF8000'
103 | }
104 | }
105 | ]
106 | }
107 | var allData=this.getPriceData().slice(80,200);
108 | for (var i = 0; i < allData.length; i++) {
109 |
110 | allData[i][0]=allData[i][0].substring(4);
111 | avgData.xValues.push(allData[i][0]);
112 | avgData.yValues[0].data.push(allData[i][8]);
113 | avgData.yValues[1].data.push(allData[i][9]);
114 | avgData.yValues[2].data.push(allData[i][10]);
115 | avgData.yValues[3].data.push(allData[i][11]);
116 | };
117 | return avgData;
118 | },
119 | render: function() {
120 | return (
121 |
122 |
123 |
124 |
136 |
137 |
138 |
139 |
140 |
141 |
142 | );
143 | }
144 | });
145 |
146 | var styles = StyleSheet.create({
147 | container:{
148 | flex:1
149 | },
150 | chartContainer:{
151 | flex:1
152 | },
153 | chart:{
154 | flex:1
155 | }
156 | });
157 |
158 |
159 | module.exports = Component;
160 |
--------------------------------------------------------------------------------