最近做了兩個數據展示的APP,都使用到了MPAndroidChart這個圖表框架。
框架地址:https://github.com/PhilJay/MPAndroidChart
下面就來講解一下MPChart的使用
MPAndoridChart
Chart types(目前支持的圖表類別)
LineChart (with legend, simple design) (線性圖1)
LineChart (with legend, simple design) (線性圖2)
LineChart (cubic lines) (線性圖3)
LineChart (gradient fill) (線性圖4)
Combined-Chart (bar- and linechart in this case) (組合圖 柱狀圖加線形圖組合)
BarChart (with legend, simple design)(柱狀圖1)
BarChart (grouped DataSets) (柱狀圖2)
Horizontal-BarChart(橫向柱狀圖)
PieChart (with selection, …) (餅狀圖)
ScatterChart (with squares, triangles, circles, … and more)(散點圖)
CandleStickChart (for financial data) (燭形圖)
BubbleChart (area covered by bubbles indicates the yValue)(氣泡圖)
RadarChart (spider web chart)(雷達圖)
功能
- 支持x,y軸縮放
- 支持拖拽
- 支持手指滑動
- 支持高亮顯示
- 支持保存圖表到文件中
- 支持從文件(txt)中讀取數據
- 預先定義顏色模板
- 自動生成標註
- 支持自定義x,y軸的顯示標籤
- 支持x,y軸動畫
- 支持x,y軸設置最大值和附加信息
- 支持自定義字體,顏色,背景,手勢,虛線等
實現
寫sample的時候才發現,從1.0版本到3.0版本這個框架改動還是蠻多的。
主要是把雷達圖和餅狀圖抽取共用了。爲了實現複合圖將X軸值的設置放到了Axais中。之前是直接放到ChartData中的。
圖表常用的實現:
每個圖表都必須實現填充ChartData,也就是XY軸的數據。
系統有默認的圖表樣式,可根據喜好設置圖表的樣式,各種顏色、形狀、數據之間的間距等。
可以根據圖表的繪製流程和圖表的點擊事件(點擊某個數據的監聽)設置監聽。
可以添加圖表的一些輔助顯示工具:MarkView(以MarkView的形式顯示數據,這種在數據量大的情況能避免數據顯示重疊),Legend(圖表軸描述)
這邊以LineChart爲例
package cn.xiaolongonly.mpchartsample.ui;
import android.graphics.Color;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import java.util.ArrayList;
import java.util.List;
import cn.xiaolongonly.mpchartsample.R;
import cn.xiaolongonly.mpchartsample.base.BaseActivity;
import cn.xiaolongonly.mpchartsample.chart.markview.DataMarkView;
import cn.xiaolongonly.mpchartsample.chart.util.ColorTemplate;
/**
* @author xiaolong
* @version v1.0
* @function <描述功能>
* @date 2016/12/6-9:10
*/
public class LineChartActivity1 extends BaseActivity {
private LineChart chart;
@Override
protected int getLayoutId() {
return R.layout.list_item_linechart;
}
@Override
protected void initView() {
chart = findView(R.id.chart);
ChartConfig();
//XY軸配置
XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //定製X軸是在圖表上方還是下方。
xAxis.setDrawGridLines(false);
xAxis.setGranularity(1);
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return (int) value + "年";
}
});
YAxis yAxisRight = chart.getAxisRight();
yAxisRight.setEnabled(false);
YAxis yAxisLeft = chart.getAxisLeft();
yAxisLeft.setAxisMinValue(0);
//動畫效果
chart.animateX(750);
chart.animateY(750);
}
/**
* 圖表的配置 一些提示和Legend
*/
private void ChartConfig() {
//設置覆蓋物
DataMarkView dataMarkView = new DataMarkView(this, 0, "");//自定義覆蓋物
chart.setMarkerView(dataMarkView);
//背景設置
chart.setDrawGridBackground(false);//表格背景繪製
chart.setBackgroundColor(getResources().getColor(R.color.chart_bg));
//Legend定製
chart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
chart.getLegend().setForm(Legend.LegendForm.CIRCLE);//Legend樣式
//圖表描述
chart.setDescription(null);
// 設置無數據文本提示
chart.setNoDataText(getResources().getString(R.string.chart_no_data));
//XY軸描述
chart.setXYDesc("年份", "總金額(元)");
//設置單方向和雙方向縮放 true x,y方向可以同時控制,false只能控制x方向的縮小放大或者Y方向的縮小放大
chart.setPinchZoom(true);
//填充數據
chart.setData(new LineData(generateLineDataSet()));
}
@Override
protected void setListener() {
}
private ILineDataSet generateLineDataSet() {
int color = ColorTemplate.PIE_COLORS[0];
LineDataSet dataSet = new LineDataSet(generateData(), "年度營業額曲線");
dataSet.setLineWidth(2.0f);
dataSet.setCircleRadius(3.5f);
dataSet.setDrawCircleHole(true);//填充圓
dataSet.setValueTextSize(9f);
dataSet.setHighlightLineWidth(2.0f);
dataSet.setDrawFilled(true);//區域顏色
dataSet.setFillAlpha(51);
dataSet.setFillColor(color); //填充色
dataSet.setHighLightColor(color); //選中十字線色
dataSet.setColor(color); //線條顏色
dataSet.setCircleColor(color); //圓點顏色
dataSet.setCircleColorHole(Color.WHITE);
dataSet.setCircleHoleRadius(2.0f);
dataSet.setDrawValues(false);
return dataSet;
}
private List<Entry> generateData() {
List<Entry> entryList = new ArrayList<>();
entryList.add(new Entry(2013, 1000));
entryList.add(new Entry(2014, 2000));
entryList.add(new Entry(2015, 3000));
entryList.add(new Entry(2016, 4000));
return entryList;
}
}
效果如下
簡單的介紹了一下MPChart的實現,一般就兩個流程:
一是設置圖表配置(Legend,X,Y軸樣式,圖表樣式,markView添加,動畫效果等,注:不設置的話會使用默認的配置)
二是填充數據(將需要展示的數據綁定到圖表框架中)。
圖表框架有寫地方並不能滿足我們的需求,比如說沒有XY軸描述。
國內的人大部分看圖表的習慣就只需要顯示單條X,Y軸,並在軸末端設置單位等。
下一篇文章介紹 自定義需求,XY軸描述添加。
參考自:http://blog.csdn.net/u013338165/article/details/44810025