MPAndroidChart详解

最新推荐文章于 2024-06-22 13:41:47 发布

Zerooooooooooooooooo

最新推荐文章于 2024-06-22 13:41:47 发布

阅读量1.1k

点赞数

分类专栏：前端技术文章标签： android MPAndroidChart

前端技术专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个强大的Android图表绘制库MPAndroidChart，该库支持多种图表类型，并提供了丰富的自定义选项和动画效果。文章通过示例代码展示了如何创建图表、设置样式及添加数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://blog.youkuaiyun.com/guijiaoba/article/details/41444697

最近一个项目需要用到表格进行统计显示，本来用的是的achartengine，后来发现一个更加强大的开源框架MPAndroidChart。

下面简单介绍下MPAndroidChart，MPAndroidChart的效果还是蛮好的，提供各种动画，这个也是我使用MPAndroidChart，而且放弃achartengine的原因。

Github地址连接，后面是youtube上面演示MPAndroidChart的视频，MPAndroidChart由于提供了动画效果，为了兼容低版本的Android系统，MPAndroidChart需要添加nineoldandroids-2.4.0-2.jar作为依赖库，所以如果项目中使用这个表格库，需要同时导入这个两个jar，当然如果使用libproject的方式，就不用了。

https://github.com/PhilJay/MPAndroidChart

https://www.youtube.com/watch?v=ufaK_Hd6BpI

http://nineoldandroids.com/

核心功能:

支持x，y轴缩放
支持拖拽
支持手指滑动
支持高亮显示
支持保存图表到文件中
支持从文件（txt）中读取数据
预先定义颜色模板
自动生成标注
支持自定义x，y轴的显示标签
支持x，y轴动画
支持x，y轴设置最大值和附加信息
支持自定义字体，颜色，背景，手势，虚线等

显示的图表类型:

LineChart (with legend, simple design) (线性图)
LineChart (with legend, simple design) (线性图)
LineChart (cubic lines) (线性图)
LineChart (single DataSet) (线性图)
BarChart2D (with legend, simple design) (柱状图)

alt tag

BarChart2D (grouped DataSets) (柱状图)

alt tag

BarChart2D

alt tag

PieChart (with selection, ...) (饼状图)

alt tag

ScatterChart (with squares, triangles, circles, ... and more)（散列图）

alt tag

CandleStickChart (for financial data)

alt tag

RadarChart (spider web chart)（螂蛛网图）

alt tag

1、直接使用jar方式，需要导入mpchartlib.jar，nineoldandroidsjar。

2、使用libproject的方式，作为项目依赖。

步骤:

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

<span class="tag"><<span class="pl-ent" style="color:#63a35c;"><span class="title">com</span></span><span class="title">.github.mikephil.charting.charts.LineChart
</span>        <span class="pl-e" style="color:#795da3;"><span class="attribute">android</span></span><span class="attribute"><span class="pl-e" style="color:#795da3;">:</span><span class="pl-e" style="color:#795da3;">id</span></span><span class="pl-e" style="color:#795da3;"></span>=<span class="pl-s1" style="color:#df500;"><span class="pl-pds" style=""><span class="value">"</span></span><span class="value">@+id/chart<span class="pl-pds" style="">"</span></span><span class="pl-pds" style=""></span></span>
        <span class="pl-e" style="color:#795da3;"><span class="attribute">android</span></span><span class="attribute"><span class="pl-e" style="color:#795da3;">:</span><span class="pl-e" style="color:#795da3;">layout_width</span></span><span class="pl-e" style="color:#795da3;"></span>=<span class="pl-s1" style="color:#df500;"><span class="pl-pds" style=""><span class="value">"</span></span><span class="value">match_parent<span class="pl-pds" style="">"</span></span><span class="pl-pds" style=""></span></span>
        <span class="pl-e" style="color:#795da3;"><span class="attribute">android</span></span><span class="attribute"><span class="pl-e" style="color:#795da3;">:</span><span class="pl-e" style="color:#795da3;">layout_height</span></span><span class="pl-e" style="color:#795da3;"></span>=<span class="pl-s1" style="color:#df500;"><span class="pl-pds" style=""><span class="value">"</span></span><span class="value">match_parent<span class="pl-pds" style="">"</span></span><span class="pl-pds" style=""></span></span> /></span>

<span class="pl-stj" style="">LineChart</span> chart <span class="pl-k" style="color:#a71d5d;">=</span> (<span class="pl-stj" style="">LineChart</span>) findViewById(<span class="pl-stj" style="">R</span><span class="pl-k" style="color:#a71d5d;">.</span>id<span class="pl-k" style="color:#a71d5d;">.</span>chart);

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

<span class="pl-stj" style="">LineChart</span> chart <span class="pl-k" style="color:#a71d5d;">=</span> <span class="pl-k" style="color:#a71d5d;"><span class="keyword">new</span></span> <span class="pl-stj" style="">LineChart</span>(<span class="pl-stj" style="">Context</span>);

主要的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<span class="pl-k" style="color:#a71d5d;">.</span>animateX(<span class="pl-c1" style="color:#086b3;"><span class="number">3000f</span></span>); <span class="pl-c" style="color:#969896;"><span class="comment">// animate horizontal 3000 milliseconds</span></span>
<span class="pl-c" style="color:#969896;"><span class="comment">// or:</span></span>
mChart<span class="pl-k" style="color:#a71d5d;">.</span>animateY(<span class="pl-c1" style="color:#086b3;"><span class="number">3000f</span></span>); <span class="pl-c" style="color:#969896;"><span class="comment">// animate vertical 3000 milliseconds</span></span>
<span class="pl-c" style="color:#969896;"><span class="comment">// or:</span></span>
mChart<span class="pl-k" style="color:#a71d5d;">.</span>animateXY(<span class="pl-c1" style="color:#086b3;"><span class="number">3000f</span></span>, <span class="pl-c1" style="color:#086b3;"><span class="number">3000f</span></span>); <span class="pl-c" style="color:#969896;"><span class="comment">// animate horizontal and vertical 3000 milliseconds</span></span>

注意：如果调用动画方法后，就没有必要调用 invalidate（）方法，来刷新界面了。

添加数据到图表：

下面是MPAndroidChart中的一个demo实例，简单介绍怎么添加数据到图表中，以及动画显示。

<span class="keyword">package</span> com.xxmassdeveloper.mpchartexample;

<span class="keyword">import</span> android.graphics.Color;
<span class="keyword">import</span> android.graphics.Typeface;
<span class="keyword">import</span> android.os.Bundle;
<span class="keyword">import</span> android.view.WindowManager;

<span class="keyword">import</span> com.github.mikephil.charting.charts.LineChart;
<span class="keyword">import</span> com.github.mikephil.charting.data.Entry;
<span class="keyword">import</span> com.github.mikephil.charting.data.LineData;
<span class="keyword">import</span> com.github.mikephil.charting.data.LineDataSet;
<span class="keyword">import</span> com.github.mikephil.charting.utils.Legend;
<span class="keyword">import</span> com.github.mikephil.charting.utils.Legend.LegendForm;
<span class="keyword">import</span> com.github.mikephil.charting.utils.XLabels;
<span class="keyword">import</span> com.github.mikephil.charting.utils.YLabels;
<span class="keyword">import</span> com.xxmassdeveloper.mpchartexample.notimportant.DemoBase;

<span class="keyword">import</span> java.util.ArrayList;

<span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">LineChartActivityColored</span> <span class="keyword">extends</span> <span class="title">DemoBase</span> {</span>

<span class="indent">  </span>LineChart[] mCharts = <span class="keyword">new</span> LineChart[<span class="number">4</span>]; <span class="comment">// 4条数据</span>
<span class="indent">  </span>Typeface mTf; <span class="comment">// 自定义显示字体</span>
<span class="indent">  </span><span class="keyword">int</span>[] mColors = <span class="keyword">new</span> <span class="keyword">int</span>[] { Color.rgb(<span class="number">137</span>, <span class="number">230</span>, <span class="number">81</span>), Color.rgb(<span class="number">240</span>, <span class="number">240</span>, <span class="number">30</span>),<span class="comment">//</span>
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span>Color.rgb(<span class="number">89</span>, <span class="number">199</span>, <span class="number">250</span>), Color.rgb(<span class="number">250</span>, <span class="number">104</span>, <span class="number">104</span>) }; <span class="comment">// 自定义颜色</span>

<span class="indent">  </span><span class="annotation">@Override</span>
<span class="indent">  </span><span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState) {
<span class="indent">  </span><span class="indent">  </span><span class="keyword">super</span>.onCreate(savedInstanceState);
<span class="indent">  </span><span class="indent">  </span>getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
<span class="indent">  </span><span class="indent">  </span>setContentView(R.layout.activity_colored_lines);

<span class="indent">  </span><span class="indent">  </span>mCharts[<span class="number">0</span>] = (LineChart) findViewById(R.id.chart1);
<span class="indent">  </span><span class="indent">  </span>mCharts[<span class="number">1</span>] = (LineChart) findViewById(R.id.chart2);
<span class="indent">  </span><span class="indent">  </span>mCharts[<span class="number">2</span>] = (LineChart) findViewById(R.id.chart3);
<span class="indent">  </span><span class="indent">  </span>mCharts[<span class="number">3</span>] = (LineChart) findViewById(R.id.chart4);

<span class="indent">  </span><span class="indent">  </span><span class="comment">// 自定义字体</span>
<span class="indent">  </span><span class="indent">  </span>mTf = Typeface.createFromAsset(getAssets(), <span class="string">"OpenSans-Bold.ttf"</span>);
<span class="indent">  </span><span class="indent">  </span><span class="comment">// 生产数据</span>
<span class="indent">  </span><span class="indent">  </span>LineData data = getData(<span class="number">36</span>, <span class="number">100</span>);

<span class="indent">  </span><span class="indent">  </span><span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">0</span>; i < mCharts.length; i++) {
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span><span class="comment">// add some transparency to the color with "& 0x90FFFFFF"</span>
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span>setupChart(mCharts[i], data, mColors[i % mColors.length]);
<span class="indent">  </span><span class="indent">  </span>}
<span class="indent">  </span>}
<span class="indent">  </span><span class="comment">// 设置显示的样式</span>
<span class="indent">  </span><span class="keyword">void</span> setupChart(LineChart chart, LineData data, <span class="keyword">int</span> color) {
<span class="indent">  </span><span class="indent">  </span><span class="comment">// if enabled, the chart will always start at zero on the y-axis</span>
<span class="indent">  </span><span class="indent">  </span>chart.setStartAtZero(<span class="keyword">true</span>);

<span class="indent">  </span><span class="indent">  </span><span class="comment">// disable the drawing of values into the chart</span>
<span class="indent">  </span><span class="indent">  </span>chart.setDrawYValues(<span class="keyword">false</span>);

<span class="indent">  </span><span class="indent">  </span>chart.setDrawBorder(<span class="keyword">false</span>);

<span class="indent">  </span><span class="indent">  </span><span class="comment">// no description text</span>
<span class="indent">  </span><span class="indent">  </span>chart.setDescription(<span class="string">""</span>);<span class="comment">// 数据描述</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">// 如果没有数据的时候，会显示这个，类似listview的emtpyview</span>
<span class="indent">  </span><span class="indent">  </span>chart.setNoDataTextDescription(<span class="string">"You need to provide data for the chart."</span>);

<span class="indent">  </span><span class="indent">  </span><span class="comment">// enable / disable grid lines</span>
<span class="indent">  </span><span class="indent">  </span>chart.setDrawVerticalGrid(<span class="keyword">false</span>); <span class="comment">// 是否显示水平的表格</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">// mChart.setDrawHorizontalGrid(false);</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">//</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">// enable / disable grid background</span>
<span class="indent">  </span><span class="indent">  </span>chart.setDrawGridBackground(<span class="keyword">false</span>); <span class="comment">// 是否显示表格颜色</span>
<span class="indent">  </span><span class="indent">  </span>chart.setGridColor(Color.WHITE & <span class="number">0x70FFFFFF</span>); <span class="comment">// 表格的的颜色，在这里是是给颜色设置一个透明度</span>
<span class="indent">  </span><span class="indent">  </span>chart.setGridWidth(<span class="number">1.25</span>f);<span class="comment">// 表格线的线宽</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// enable touch gestures</span>
<span class="indent">  </span><span class="indent">  </span>chart.setTouchEnabled(<span class="keyword">true</span>); <span class="comment">// 设置是否可以触摸</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// enable scaling and dragging</span>
<span class="indent">  </span><span class="indent">  </span>chart.setDragEnabled(<span class="keyword">true</span>);<span class="comment">// 是否可以拖拽</span>
<span class="indent">  </span><span class="indent">  </span>chart.setScaleEnabled(<span class="keyword">true</span>);<span class="comment">// 是否可以缩放</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// if disabled, scaling can be done on x- and y-axis separately</span>
<span class="indent">  </span><span class="indent">  </span>chart.setPinchZoom(<span class="keyword">false</span>);<span class="comment">// </span>

<span class="indent">  </span><span class="indent">  </span>chart.setBackgroundColor(color);<span class="comment">// 设置背景</span>

<span class="indent">  </span><span class="indent">  </span>chart.setValueTypeface(mTf);<span class="comment">// 设置字体</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// add data</span>
<span class="indent">  </span><span class="indent">  </span>chart.setData(data); <span class="comment">// 设置数据</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// get the legend (only possible after setting data)</span>
<span class="indent">  </span><span class="indent">  </span>Legend l = chart.getLegend(); <span class="comment">// 设置标示，就是那个一组y的value的</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// modify the legend ...</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">// l.setPosition(LegendPosition.LEFT_OF_CHART);</span>
<span class="indent">  </span><span class="indent">  </span>l.setForm(LegendForm.CIRCLE);<span class="comment">// 样式</span>
<span class="indent">  </span><span class="indent">  </span>l.setFormSize(<span class="number">6</span>f);<span class="comment">// 字体</span>
<span class="indent">  </span><span class="indent">  </span>l.setTextColor(Color.WHITE);<span class="comment">// 颜色</span>
<span class="indent">  </span><span class="indent">  </span>l.setTypeface(mTf);<span class="comment">// 字体</span>

<span class="indent">  </span><span class="indent">  </span>YLabels y = chart.getYLabels(); <span class="comment">// y轴的标示</span>
<span class="indent">  </span><span class="indent">  </span>y.setTextColor(Color.WHITE);
<span class="indent">  </span><span class="indent">  </span>y.setTypeface(mTf);
<span class="indent">  </span><span class="indent">  </span>y.setLabelCount(<span class="number">4</span>); <span class="comment">// y轴上的标签的显示的个数</span>

<span class="indent">  </span><span class="indent">  </span>XLabels x = chart.getXLabels(); <span class="comment">// x轴显示的标签</span>
<span class="indent">  </span><span class="indent">  </span>x.setTextColor(Color.WHITE);
<span class="indent">  </span><span class="indent">  </span>x.setTypeface(mTf);

<span class="indent">  </span><span class="indent">  </span><span class="comment">// animate calls invalidate()...</span>
<span class="indent">  </span><span class="indent">  </span>chart.animateX(<span class="number">2500</span>); <span class="comment">// 立即执行的动画,x轴</span>
<span class="indent">  </span>}

<span class="indent">  </span><span class="comment">// 生成一个数据，</span>
<span class="indent">  </span>LineData getData(<span class="keyword">int</span> count, <span class="keyword">float</span> range) {
<span class="indent">  </span><span class="indent">  </span>ArrayList<String> xVals = <span class="keyword">new</span> ArrayList<String>();
<span class="indent">  </span><span class="indent">  </span><span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">0</span>; i < count; i++) {
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span><span class="comment">// x轴显示的数据，这里默认使用数字下标显示</span>
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span>xVals.add(mMonths[i % <span class="number">12</span>]);
<span class="indent">  </span><span class="indent">  </span>}

<span class="indent">  </span><span class="indent">  </span><span class="comment">// y轴的数据</span>
<span class="indent">  </span><span class="indent">  </span>ArrayList<Entry> yVals = <span class="keyword">new</span> ArrayList<Entry>();
<span class="indent">  </span><span class="indent">  </span><span class="keyword">for</span> (<span class="keyword">int</span> i = <span class="number">0</span>; i < count; i++) {
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span><span class="keyword">float</span> val = (<span class="keyword">float</span>) (Math.random() * range) + <span class="number">3</span>;
<span class="indent">  </span><span class="indent">  </span><span class="indent">  </span>yVals.add(<span class="keyword">new</span> Entry(val, i));
<span class="indent">  </span><span class="indent">  </span>}

<span class="indent">  </span><span class="indent">  </span><span class="comment">// create a dataset and give it a type</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">// y轴的数据集合</span>
<span class="indent">  </span><span class="indent">  </span>LineDataSet set1 = <span class="keyword">new</span> LineDataSet(yVals, <span class="string">"DataSet 1"</span>);
<span class="indent">  </span><span class="indent">  </span><span class="comment">// set1.setFillAlpha(110);</span>
<span class="indent">  </span><span class="indent">  </span><span class="comment">// set1.setFillColor(Color.RED);</span>

<span class="indent">  </span><span class="indent">  </span>set1.setLineWidth(<span class="number">1.75</span>f); <span class="comment">// 线宽</span>
<span class="indent">  </span><span class="indent">  </span>set1.setCircleSize(<span class="number">3</span>f);<span class="comment">// 显示的圆形大小</span>
<span class="indent">  </span><span class="indent">  </span>set1.setColor(Color.WHITE);<span class="comment">// 显示颜色</span>
<span class="indent">  </span><span class="indent">  </span>set1.setCircleColor(Color.WHITE);<span class="comment">// 圆形的颜色</span>
<span class="indent">  </span><span class="indent">  </span>set1.setHighLightColor(Color.WHITE); <span class="comment">// 高亮的线的颜色</span>

<span class="indent">  </span><span class="indent">  </span>ArrayList<LineDataSet> dataSets = <span class="keyword">new</span> ArrayList<LineDataSet>();
<span class="indent">  </span><span class="indent">  </span>dataSets.add(set1); <span class="comment">// add the datasets</span>

<span class="indent">  </span><span class="indent">  </span><span class="comment">// create a data object with the datasets</span>
<span class="indent">  </span><span class="indent">  </span>LineData data = <span class="keyword">new</span> LineData(xVals, dataSets);

<span class="indent">  </span><span class="indent">  </span><span class="keyword">return</span> data;
<span class="indent">  </span>}
}

运行效果图如下：

MPAndroidChart使用方法

这里我们举例绘制一个饼图，步骤如下：

XML布局代码

<com.github.mikephil.charting.charts.PieChart
android:id=”@+id/spread_pie_chart”
android:layout_width=”match_parent”
android:layout_height=”320dip” />

初始化饼图

ColorTemplate mCt;
mCt = new ColorTemplate();
mCt.addDataSetColors(ColorTemplate.PASTEL_COLORS, this);
mChart = (PieChart) headView.findViewById(R.id.spread_pie_chart);
mChart.setColorTemplate(mCt);
mChart.setDescription(“”);
mChart.setHoleRadius(30f);
mChart.setTransparentCircleRadius(0f);
mChart.setCenterTextSize(18f);
mChart.setDrawXValues(true);
mChart.setUsePercentValues(true);
mChart.setDrawLegend(false);
// space between slices
mChart.setSliceSpace(1f);
mChart.setDrawHoleEnabled(false);
mChart.setTouchEnabled(false);

绑定图表数据

ArrayList yVals = new ArrayList();
ArrayList xVals = new ArrayList();
for (int i = 0; i < listDatas.size(); i++) {
    yVals.add(new Entry((float)listDatas.get(i).getProvinceCount(), i));
    xVals.add(listDatas.get(i).getProvinceName());
}
DataSet set1 = new DataSet(yVals, "Content");
ArrayList dataSets = new ArrayList();
dataSets.add(set1);
ChartData data = new ChartData(xVals, dataSets);
mChart.setData(data);

对于简单的Android图表需求，MPAndroidChart可以很好的解决，不妨大家可以试一试。