非常实用的图表工具MPAndroidChart

最近做了两个数据展示的APP,都使用到了MPAndroidChart这个图表框架。

框架地址:https://github.com/PhilJay/MPAndroidChart

下面就来讲解一下MPChart的使用

MPAndoridChart

Chart types(目前支持的图表类别)

  • LineChart (with legend, simple design) (线性图1)
    线性图1

  • LineChart (with legend, simple design) (线性图2)
    线性图2

  • LineChart (cubic lines) (线性图3)
    线性图3

  • LineChart (gradient fill) (线性图4)
    线性图4

  • Combined-Chart (bar- and linechart in this case) (组合图 柱状图加线形图组合)
    组合图

  • BarChart (with legend, simple design)(柱状图1)
    柱状图1

  • BarChart (grouped DataSets) (柱状图2)

柱状图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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章