UDN-企业互联网技术人气社区

板块导航

浏览  : 1985
回复  : 0

[前端] MPAndroidChart 的基本使用和配置

[复制链接]
独领风骚的头像 楼主
发表于 2017-1-4 16:12:43 | 显示全部楼层 |阅读模式
  MPAndroidChart 是一个Android非常强大的图标库,包括线形图,柱状图,饼图,雷达图,散列图,等等只要你见过的图都有。官网github的地址 MPAndroidChart

  效果图

  为了演示各个属性,好多对默认属性进行了相反操作:
1.png

  静态效果图

  常用属性的基本配置
  1. package me.febsky.test;

  2. import android.graphics.Color;
  3. import android.support.v7.app.AppCompatActivity;
  4. import android.os.Bundle;

  5. import com.github.mikephil.charting.charts.LineChart;
  6. import com.github.mikephil.charting.components.AxisBase;
  7. import com.github.mikephil.charting.components.Legend;
  8. import com.github.mikephil.charting.components.XAxis;
  9. import com.github.mikephil.charting.components.YAxis;
  10. import com.github.mikephil.charting.data.Entry;
  11. import com.github.mikephil.charting.data.LineData;
  12. import com.github.mikephil.charting.data.LineDataSet;
  13. import com.github.mikephil.charting.formatter.IAxisValueFormatter;

  14. import java.util.ArrayList;

  15. import static com.github.mikephil.charting.components.YAxis.YAxisLabelPosition.INSIDE_CHART;

  16. public class MainActivity extends AppCompatActivity {

  17.     private LineChart mChart;

  18.     private int[] mColors = new int[]{
  19.             Color.parseColor("#5abdfc"),    //蓝色
  20.             Color.parseColor("#eb73f6")    //紫色
  21.     };

  22.     protected String[] mMonths = new String[]{
  23.             "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"
  24.     };

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

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


  30.         initChartView();

  31.         /**-------------这里的数据不重要,主要用随机数的方式生成点坐标-------------**/
  32.         //设置模拟数据
  33.         ArrayList<Entry> yVals = new ArrayList<Entry>();
  34.         for (int i = 0; i < 12; i++) {
  35.             yVals.add(new Entry(i, (float) (Math.random() * 10000f)));
  36.         }

  37.         ArrayList<Entry> yVals2 = new ArrayList<Entry>();
  38.         for (int i = 0; i < 12; i++) {
  39.             yVals2.add(new Entry(i, (float) (Math.random() * 10000f)));
  40.         }

  41.         addDataSet(yVals, "一居");
  42.         addDataSet(yVals2, "两居");
  43.         /**--------------------------**/

  44.         //图标的下边的指示块  图例
  45.         Legend l = mChart.getLegend();
  46.         l.setForm(Legend.LegendForm.LINE);
  47.         l.setXEntrySpace(40);
  48.     }


  49.     private void initChartView() {
  50.         mChart.setDrawGridBackground(false);
  51.         mChart.setDescription(null);    //右下角说明文字
  52.         mChart.setDrawBorders(true);    //四周是不是有边框
  53.         mChart.setBorderWidth(0.5f);
  54.         mChart.setBorderColor(Color.parseColor("#b3b3b3"));    //边框颜色,默认黑色?
  55. //        mChart.setVisibleXRangeMaximum(4);

  56.         // enable touch gestures
  57.         mChart.setTouchEnabled(true);
  58.         // if disabled, scaling can be done on x- and y-axis separately
  59.         //禁止x轴y轴同时进行缩放
  60.         mChart.setPinchZoom(false);
  61.         // enable scaling and dragging
  62.         mChart.setDragEnabled(true);
  63.         mChart.setScaleEnabled(true);

  64.         //控制轴上的坐标绘制在什么地方 上边下边左边右边
  65.         XAxis xAxis = mChart.getXAxis();
  66.         xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);    //x轴是在上边显示还是显示在下边
  67.         xAxis.enableGridDashedLine(10f, 10f, 0f);    //背景用虚线表格来绘制  给整成虚线
  68.         xAxis.setAxisMinimum(0f);//设置轴的最小值。这样设置将不会根据提供的数据自动计算。
  69.         xAxis.setGranularityEnabled(true);    //粒度
  70.         xAxis.setGranularity(1f);    //缩放的时候有用,比如放大的时候,我不想把横轴的月份再细分

  71.         xAxis.setValueFormatter(new IAxisValueFormatter() {
  72.             @Override
  73.             public String getFormattedValue(float value, AxisBase axis) {
  74.                 return mMonths[(int) value % mMonths.length];
  75.             }

  76.             @Override
  77.             public int getDecimalDigits() {
  78.                 return 0;
  79.             }
  80.         });
  81. //        xAxis.setAxisLineWidth(0f);    //设置坐标轴那条线的宽度
  82.         xAxis.setDrawAxisLine(false);    //是否显示坐标轴那条轴
  83.         xAxis.setDrawLabels(true);    //是不是显示轴上的刻度
  84.         xAxis.setLabelCount(mMonths.length);    //强制有多少个刻度
  85.         xAxis.setTextColor(Color.parseColor("#b3b3b3"));


  86.         //隐藏左侧坐标轴显示右侧坐标轴,并对右侧的轴进行配置
  87.         mChart.getAxisLeft().setEnabled(false);
  88.         YAxis leftAxis = mChart.getAxisRight();
  89.         leftAxis.setEnabled(true);
  90.         leftAxis.enableGridDashedLine(10f, 10f, 0f);
  91.         leftAxis.setAxisMinimum(0);
  92.         leftAxis.setDrawAxisLine(false);
  93.         //坐标轴绘制在图表的内侧
  94.         leftAxis.setPosition(INSIDE_CHART);
  95.         leftAxis.setTextColor(Color.parseColor("#b3b3b3"));
  96.         //确实没看懂这个是干嘛用的,默认是10f
  97.         //这个玩意好像有坐标轴enable的时候是不可用的
  98.         leftAxis.setSpaceBottom(10f);

  99.         //一个chart中包含一个Data对象,一个Data对象包含多个DataSet对象,
  100.         // 每个DataSet是对应一条线上的所有点(相对于折线图来说)
  101.         mChart.setData(new LineData());

  102.     }


  103.     /**
  104.      * Author: liuqiang
  105.      * Time: 2016-12-26 15:58
  106.      * Description: 根据数据集合,动态构建DataSet,来绘制界面
  107.      */
  108.     private void addDataSet(ArrayList<Entry> entryList, String dataSetName) {

  109.         LineData data = mChart.getData();

  110.         if (data != null) {
  111.             int count = data.getDataSetCount();

  112.             LineDataSet set = new LineDataSet(entryList, dataSetName);
  113.             set.setLineWidth(1.5f);
  114.             set.setCircleRadius(3.5f);

  115.             int color = mColors[count % mColors.length];

  116.             set.setColor(color);
  117.             set.setCircleColor(color);
  118.             set.setHighLightColor(color);
  119.             set.setValueTextSize(10f);
  120.             set.setDrawValues(false);    //节点不显示具体数值
  121.             set.setValueTextColor(color);
  122.             set.enableDashedHighlightLine(10f, 5f, 0f);    //选中某个点的时候高亮显示只是线
  123.             set.setDrawFilled(true);     //填充折线图折线和坐标轴之间
  124.             set.setFillColor(color);

  125. //            set.setDrawVerticalHighlightIndicator(false);//取消纵向辅助线
  126.             set.setDrawHorizontalHighlightIndicator(false);//取消横向辅助线

  127.             data.addDataSet(set);
  128.             data.notifyDataChanged();
  129.             mChart.notifyDataSetChanged();
  130.             //这行代码必须放到这里,这里设置的是图表这个视窗能显示,x坐标轴,从最大值到最小值之间
  131.             //多少段,好像这个库没有办法设置x轴中的间隔的大小
  132.             mChart.setVisibleXRangeMaximum(6);
  133.             mChart.invalidate();
  134.         }
  135.     }
  136. }
复制代码

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部