需要外部资源:mpandroidchartlibrary-2-1-6.jar )

效果图:

android折线图渐变 安卓折线图代码_折线图

实现Android折线图,基于mpandroidchartlibrary-2-1-6.jar。
直接上代码,后面含有适用于Android studio的gradle文件。如果在eclipse中使用需要下载mpandroidchartlibrary-2-1-6.jar包
MainActivity.java:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LineChart chart = (LineChart) findViewById(R.id.chart);

        // 制作7个数据点(沿x坐标轴)
        LineData mLineData = makeLineData(7);
        setChartStyle(chart, mLineData, Color.WHITE);
    }

    // 设置chart显示的样式
    private void setChartStyle(LineChart mLineChart, LineData lineData,
                               int color) {
        // 是否在折线图上添加边框
        mLineChart.setDrawBorders(false);

        mLineChart.setDescription("描述@ZhangPhil");// 数据描述

        // 如果没有数据的时候,会显示这个,类似listview的emtpyview
        mLineChart
                .setNoDataTextDescription("如果传给MPAndroidChart的数据为空,那么你将看到这段文字。@Zhang Phil");

        // 是否绘制背景颜色。
        // 如果mLineChart.setDrawGridBackground(false),
        // 那么mLineChart.setGridBackgroundColor(Color.CYAN)将失效;
        mLineChart.setDrawGridBackground(false);
        mLineChart.setGridBackgroundColor(Color.CYAN);

        // 触摸
        mLineChart.setTouchEnabled(true);

        // 拖拽
        mLineChart.setDragEnabled(true);

        // 缩放
        mLineChart.setScaleEnabled(true);

        mLineChart.setPinchZoom(false);
        // 隐藏右边 的坐标轴
        mLineChart.getAxisRight().setEnabled(false);
        // 让x轴在下面
                          mLineChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);

        // // 隐藏左边坐标轴横网格线
        // mLineChart.getAxisLeft().setDrawGridLines(false);
        // // 隐藏右边坐标轴横网格线
        // mLineChart.getAxisRight().setDrawGridLines(false);
        // // 隐藏X轴竖网格线
        // mLineChart.getXAxis().setDrawGridLines(false);
mLineChart.getAxisRight().setEnabled(true); // 隐藏右边 的坐标轴(true不隐藏)
        mLineChart.getXAxis().setPosition(XAxisPosition.BOTTOM); // 让x轴在下面
        // 设置背景
        mLineChart.setBackgroundColor(color);

        // 设置x,y轴的数据
        mLineChart.setData(lineData);

        // 设置比例图标示,就是那个一组y的value的
        Legend mLegend = mLineChart.getLegend();

        mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
        mLegend.setForm(LegendForm.CIRCLE);// 样式
        mLegend.setFormSize(15.0f);// 字体
        mLegend.setTextColor(Color.BLUE);// 颜色

        // 沿x轴动画,时间2000毫秒。
        mLineChart.animateX(2000);
    }

    /**
     * @param count 数据点的数量。
     * @return
     */
    private LineData makeLineData(int count) {
        ArrayList<String> x = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            // x轴显示的数据
            x.add("x:" + i);
        }

        // y轴的数据
        ArrayList<Entry> y = new ArrayList<Entry>();
        for (int i = 0; i < count; i++) {
            float val = (float) (Math.random() * 100);
            Entry entry = new Entry(val, i);
            y.add(entry);
        }

        // y轴数据集
        LineDataSet mLineDataSet = new LineDataSet(y, "测试数据集。by ZhangPhil");

        // 用y轴的集合来设置参数
        // 线宽
        mLineDataSet.setLineWidth(3.0f);

        // 显示的圆形大小
        mLineDataSet.setCircleSize(5.0f);

        // 折线的颜色
        mLineDataSet.setColor(Color.DKGRAY);

        // 圆球的颜色
        mLineDataSet.setCircleColor(Color.GREEN);

        // 设置mLineDataSet.setDrawHighlightIndicators(false)后,
        // Highlight的十字交叉的纵横线将不会显示,
        // 同时,mLineDataSet.setHighLightColor(Color.CYAN)失效。
        mLineDataSet.setDrawHighlightIndicators(true);

        // 按击后,十字交叉线的颜色
        mLineDataSet.setHighLightColor(Color.CYAN);

        // 设置这项上显示的数据点的字体大小。
        mLineDataSet.setValueTextSize(10.0f);

        // mLineDataSet.setDrawCircleHole(true);

        // 改变折线样式,用曲线。
        // mLineDataSet.setDrawCubic(true);
        // 默认是直线
        // 曲线的平滑度,值越大越平滑。
        // mLineDataSet.setCubicIntensity(0.2f);

        // 填充曲线下方的区域,红色,半透明。
        // mLineDataSet.setDrawFilled(true);
        // mLineDataSet.setFillAlpha(128);
        // mLineDataSet.setFillColor(Color.RED);

        // 填充折线上数据点、圆球里面包裹的中心空白处的颜色。
        mLineDataSet.setCircleColorHole(Color.YELLOW);

        // 设置折线上显示数据的格式。如果不设置,将默认显示float数据格式。
        mLineDataSet.setValueFormatter(new ValueFormatter() {

//          @Override
//          public String getFormattedValue(float value) {
//              int n = (int) value;
//              String s = "y:" + n;
//              return s;
//          }

            @Override
            public String getFormattedValue(float value, Entry entry,
                                            int dataSetIndex, ViewPortHandler viewPortHandler) {
                // TODO Auto-generated method stub
                int n = (int) value;
                String s = "y:" + n;
                return s;
            }
        });

        ArrayList<LineDataSet> mLineDataSets = new ArrayList<LineDataSet>();
        mLineDataSets.add(mLineDataSet);

        LineData mLineData = new LineData(x, mLineDataSets);

        return mLineData;
    }
}

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent" >  

    <com.github.mikephil.charting.charts.LineChart  
        android:id="@+id/chart"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent" />  

</RelativeLayout>

附:
(1)适用于Android studio的build.gradle:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 'Google Inc.:Glass Development Kit Preview:19'
    buildToolsVersion "21.0.1"

    defaultConfig {
        applicationId "com.example.exerdemolinechart"
        minSdkVersion 14
        targetSdkVersion 19
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
    }
}

dependencies {
    compile 'com.android.support:support-v4:19.1.0'
    compile files('libs/mpandroidchartlibrary-2-1-6.jar')
}

(2)Eclipse所需的jar:
mpandroidchartlibrary-2-1-6.jar 自行下载

如果使用 LineChart, BarChart, ScatterChart, CandleStickChart or PieChart , 可以直接在xml中定义。

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
LineChart chart = (LineChart) findViewById(R.id.chart);

或则直接在代码中声明和实例化。

LineChart chart = new LineChart(Context);

主要的Api方法:

setDescription(String desc): 设置表格的描述 
 setDescriptionTypeface(Typeface t):自定义表格中显示的字体 
 setDrawYValues(boolean enabled): 设置是否显示y轴的值的数据 
 setValuePaintColor(int color):设置表格中y轴的值的颜色,但是必须设置setDrawYValues(true) 
 setValueTypeface(Typeface t):设置字体 
 setValueFormatter(DecimalFormat format): 设置显示的格式 
 setPaint(Paint p, int which): 自定义笔刷 
 public ChartData getDataCurrent():返回ChartData对象当前显示的图表。它包含了所有信息的显示值最小和最大值等 
 public float getYChartMin(): 返回当前最小值 
 public float getYChartMax(): 返回当前最大值 
 public float getAverage(): 返回所有值的平均值。 
 public float getAverage(int type): 返回平均值 
 public PointF getCenter(): 返回中间点 
 public Paint getPaint(int which): 得到笔刷 
 setTouchEnabled(boolean enabled): 设置是否可以触摸,如为false,则不能拖动,缩放等 
 setDragScaleEnabled(boolean enabled): 设置是否可以拖拽,缩放 
 setOnChartValueSelectedListener(OnChartValueSelectedListener l): 设置表格上的点,被点击的时候,的回调函数 
 setHighlightEnabled(boolean enabled): 设置点击value的时候,是否高亮显示 
 public void highlightValues(Highlight[] highs): 设置高亮显示 
 saveToGallery(String title): 保存图表到图库中 
 saveToPath(String title, String pathOnSD): 保存. 
 setScaleMinima(float x, float y): 设置最小的缩放 
 centerViewPort(int xIndex, float val): 设置视口 
 fitScreen(): 适应屏幕


动画:

所有的图表类型都支持下面三种动画,分别是x方向,y方向,xy方向。

animateX(int durationMillis): x轴方向 
 animateY(int durationMillis): y轴方向 
 animateXY(int xDuration, int yDuration): xy轴方向 
 mChart.animateX(3000f); // animate horizontal 3000 milliseconds 
 // or: 
 mChart.animateY(3000f); // animate vertical 3000 milliseconds 
 // or: 
 mChart.animateXY(3000f, 3000f); // animate horizontal and vertical 3000 milliseconds


注意:如果调用动画方法后,就没有必要调用invalidate()方法,来刷新界面了。