最牛逼android上的图表库MpChart（二）折线图

MpChart折线图实战

最新推荐文章于 2024-04-07 17:32:20 发布

转载最新推荐文章于 2024-04-07 17:32:20 发布 · 1.9k 阅读

04 Android有关专栏收录该内容

153 篇文章

订阅专栏

本文详细介绍MpChart库中折线图的配置方法与实践应用，包括如何设置背景颜色、描述文字、数据标签等，并通过具体示例展示了如何在Android应用中实现动态更新的折线图。

From：http://blog.youkuaiyun.com/hejjunlin/article/details/51775565

目录(?)[+]

最牛逼android上的图表库MpChart二折线图

最牛逼android上的图表库MpChart（二）折线图

最近工作中，用到了mpchart图表库，现在分享受下mpchart图表库的各个图表在实际工作应用场景：

最牛逼android上的图表库MpChart（一）介绍篇
最牛逼android上的图表库MpChart（二）折线图
最牛逼android上的图表库MpChart（三）条形图
最牛逼android上的图表库MpChart（四）饼图
最牛逼android上的图表库MpChart（五）泡泡图

使用mpchart jar包：mpandroidchartlibrary-2-1-6.jar
如果是在studio下，进行如下引用：
repositories {
maven { url “https://jitpack.io” }
}

dependencies {
compile ‘com.github.PhilJay:MPAndroidChart:v2.1.6’
}

MpChart折线图介绍

LineChart类
使用哪些API
- setBackgroundColor(int color): Sets the background color that will cover the whole chart-view. In addition, a background-color can be set via .xml in the layout file.
- setDescription(String desc): Set a description text that appears in the bottom right corner of the chart.
- setDescriptionColor(int color): Sets the color of the description text.
- setDescriptionPosition(float x, float y): Sets a custom position for the description text in pixels on the screen.
- setDescriptionTypeface(Typeface t): Sets the Typeface used for drawing the description text.
- setDescriptionTextSize(float size): Sets the size of the description text in pixels, min 6f, max 16f.
- setNoDataTextDescription(String desc): Sets the text that should appear if the chart is empty.
- setDrawGridBackground(boolean enabled): If enabled, the background rectangle behind the chart drawing-area will be drawn.
- setGridBackgroundColor(int color): Sets the color the grid-background should be drawn with.
- setDrawBorders(boolean enabled): Enables / disables drawing the chart borders (lines surrounding the chart).
- setBorderColor(int color): Sets the color of the chart border lines.
- setBorderWidth(float width): Sets the width of the chart border lines in dp.
- setMaxVisibleValueCount(int count): Sets the number of maximum visible drawn value-labels - on the chart. This only takes affect when setDrawValues() is enabled.

MpChart折线图实例

布局文件
Java代码

<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/chart1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>
   1
2
3
4
5
6
7
8
9
10
11

package com.example.mpchart;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.os.Message;
import android.view.WindowManager;

import com.example.mpchart.data.IDataSource;
import com.example.mpchart.data.IDataSource.onDataChangedListener;
import com.example.mpchart.data.SucRateDataSource;
import com.example.mpchart.utils.DBHelper;
import com.example.mpchart.utils.DateUtils;
import com.example.mpchart.utils.LogUtils;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendDirection;
import com.github.mikephil.charting.components.Legend.LegendForm;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.LimitLine.LimitLabelPosition;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.XAxis.XAxisPosition;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.components.YAxis.YAxisLabelPosition;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;

public class MainActivity extends Activity {

    private static final String TAG = "MainActivity";

    private LineChart mChart;
    private IDataSource mDataSource = new SucRateDataSource();

    private Handler mHandler = new Handler(Looper.getMainLooper()) {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            getData();
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        mChart = (LineChart) findViewById(R.id.chart1);

//      //在chart上的右下角加描述
        mChart.setDescription(mDataSource.getDescription());
        mChart.setDescriptionTextSize(30);
//      //设置Y轴上的单位
//      mChart.setUnit("%"); 
        //设置透明度
//      mChart.setAlpha(0.8f);
        //设置网格底下的那条线的颜色
//      mChart.setBorderColor(Color.rgb(213, 216, 214));
//      mChart.setBorderColor(Color.rgb(0, 0, 0));
//      mChart.setBackgroundColor(Color.rgb(255, 255, 255));
        mChart.setGridBackgroundColor(Color.rgb(255, 255, 255));

        //设置Y轴前后倒置
//        mChart.setInvertYAxisEnabled(false);
//        //设置高亮显示
//        mChart.setHighlightEnabled(true);
        //设置是否可以触摸，如为false，则不能拖动，缩放等
        mChart.setTouchEnabled(true);
        //设置是否可以拖拽，缩放
        mChart.setDragEnabled(true);
        mChart.setScaleEnabled(true);
        //设置是否能扩大扩小
        mChart.setPinchZoom(true);
        // 设置背景颜色
//         mChart.setBackgroundColor(Color.GRAY);
        //设置点击chart图对应的数据弹出标注
        MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
        // define an offset to change the original position of the marker
        // (optional)
//        mv.setOffsets(-mv.getMeasuredWidth() / 2, -mv.getMeasuredHeight());
//        mv.setMinimumHeight(80);
//        // set the marker to the chart
//        mChart.setMarkerView(mv);
//        // enable/disable highlight indicators (the lines that indicate the
//        // highlighted Entry)
//        mChart.setHighlightIndicatorEnabled(false);
        //设置字体格式，如正楷
        Typeface tf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");
        mChart.setDescriptionTypeface(tf);

        LimitLine ll1 = new LimitLine(95f, "警戒值 95%");
        ll1.setLineWidth(2f);
//        ll1.setLineColor(Color.rgb(0,0,0));
//        ll1.enableDashedLine(10f, 10f, 0f);
        ll1.setLabelPosition(LimitLabelPosition.LEFT_TOP);
        ll1.setTextSize(15f);
        ll1.setTypeface(tf);

        XAxis xl = mChart.getXAxis();
//      xl.setAvoidFirstLastClipping(true);
//      xl.setAdjustXLabels(true);
        xl.setPosition(XAxisPosition.BOTTOM); // 设置X轴的数据在底部显示
        xl.setTypeface(tf); // 设置字体
        xl.setTextSize(10f); // 设置字体大小
        xl.setSpaceBetweenLabels(0); // 设置数据之间的间距'

        YAxis yl = mChart.getAxisLeft();
        yl.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
//      yl.setAxisMaxValue(220f);
        yl.addLimitLine(ll1);
        yl.setTypeface(tf); // 设置字体
        yl.setTextSize(10f); // s设置字体大小
        yl.setTypeface(tf); 
        yl.setAxisMinValue(90f);
        yl.setStartAtZero(false);
//      yl.setLabelCount(5); // 设置Y轴最多显示的数据个数

        YAxis y2 = mChart.getAxisRight();
        y2.setPosition(YAxisLabelPosition.OUTSIDE_CHART);
        y2.setTypeface(tf); // 设置字体
        y2.setTextSize(10f); // s设置字体大小
        y2.setTypeface(tf); 
        y2.setAxisMinValue(90f);
        y2.setStartAtZero(false);
        getData();
        new Thread(mRunnable).start();
    }

    private Runnable mRunnable = new Runnable() {
        @Override
        public void run() {
            while(true) {
                  try {
                       Thread.sleep(15*1000);//每隔15s刷新一次，可以看到动态图
                       mHandler.sendMessage(mHandler.obtainMessage());
                   } catch (InterruptedException e) {
                       e.printStackTrace();
                  }
                  }
        }
    };

    private onDataChangedListener listener = new onDataChangedListener() {
        @Override
        public void onChanged(String[] xx, String[] yy) {
            notifyDataChanged(xx, yy);
        }

    };

    private void getData() {
        LogUtils.d(TAG, "getData() " + DateUtils.getCurrentDate()); 
        new Thread(new Runnable() {
            @Override
            public void run() {
                DBHelper.getInstance().init();
                String sql = "select *from suc_rate_chart_0614";
                final String[] xx = DBHelper.getInstance().query(sql,2); 
                final String[] yy = DBHelper.getInstance().query(sql,3); 
                mHandler.post(new Runnable() {
                    @Override
                    public void run() {
                        listener.onChanged(xx, yy);
                    }
                });
            }
        }).start();
    }

    private void notifyDataChanged(String[] xx, String[] yy) {
        Typeface tf = Typeface.createFromAsset(getAssets(),"OpenSans-Regular.ttf");
       // 加载数据
        setData(xx,yy );
        //从X轴进入的动画
        mChart.animateX(2000);
//        mChart.animateY(2000);   //从Y轴进入的动画
//        mChart.animateXY(2000, 2000);    //从XY轴一起进入的动画

        //设置最小的缩放
         mChart.setScaleMinima(0.5f, 1f);
        //设置视口
        // mChart.centerViewPort(10, 50);

        // get the legend (only possible after setting data)
        Legend l = mChart.getLegend();
        l.setForm(LegendForm.CIRCLE);  //设置图最下面显示的类型
        l.setTypeface(tf);  
        l.setTextSize(30);
        l.setTextColor(Color.rgb(244, 117, 117));
        l.setDirection(LegendDirection.LEFT_TO_RIGHT);
        l.setYOffset(100);
        l.setFormSize(20f); // set the size of the legend forms/shapes

        // 刷新图表
        mChart.invalidate();
    }

    private void setData(String[] xx, String[] yy) {

        ArrayList<String> xVals = new ArrayList<String>();
        for (int i = 0; i < xx.length; i++) {
            xVals.add(xx[i]);
        }

        ArrayList<Entry> yVals = new ArrayList<Entry>();

        for (int i = 0; i < yy.length; i++) {
            yVals.add(new Entry(Float.parseFloat(yy[i]), i));
            LogUtils.d(TAG, "yVals() " + Float.parseFloat(yy[i])); 
        }

        // create a dataset and give it a type
        LineDataSet set1 = new LineDataSet(yVals, "成功率监控");

        set1.setDrawCubic(false);  //设置曲线为圆滑的线
        set1.setCubicIntensity(0.2f);
        set1.setDrawFilled(false);  //设置包括的范围区域填充颜色
        set1.setDrawCircles(true);  //设置有圆点
        set1.setLineWidth(2f);    //设置线的宽度
        set1.setCircleSize(5f);   //设置小圆的大小
        set1.setHighLightColor(Color.rgb(244, 117, 117));
        set1.setColor(Color.rgb(244, 117, 117));    //设置曲线的颜色

        // create a data object with the datasets
        LineData data = new LineData(xVals, set1);

        // set data
        mChart.setData(data);
    }
}

   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239