[MD]模仿百度手机助手动态折线图/MPAndroidCharts实现（一）

上一篇文章[MD]模仿百度手机助手动态折线图介绍了使用HelloChart模拟百度手机助手动态折线图的方法，接下来我们使用大家都比较熟悉的MPAndroidChart来实现同样的效果，之所以用MPChart，是因为MPAndroidChart内部已经封装了我们需要的动态效果，这个我们之后会详细介绍

实现的效果如下：

设置折线图样式（折线，图例，坐标轴等）

   void initLineChart() {
        mChart = (LineChart) findViewById(R.id.chart1);
        mChart.setOnChartGestureListener(this);
        mChart.setOnChartValueSelectedListener(this);
        mChart.setDrawGridBackground(false);
        //set the description text
        mChart.setDescription("MPLineChart");
        mChart.setNoDataTextDescription("You need to provide data for the chart.");
        // enable touch gestures
        mChart.setTouchEnabled(true);
        // enable scaling and dragging
        mChart.setDragEnabled(true);
        mChart.setScaleEnabled(true);
        mChart.setHighlightPerDragEnabled(true);
        mChart.setPinchZoom(true);
        XAxis xAxis = mChart.getXAxis();
        xAxis.setEnabled(true);
        YAxis leftAxis = mChart.getAxisLeft();
        leftAxis.removeAllLimitLines(); // reset all limit lines to avoid overlapping lines
        leftAxis.setAxisMaxValue(90f);
        leftAxis.setAxisMinValue(0f);
        leftAxis.setLabelCount(6, false);
        leftAxis.setStartAtZero(false);
        mChart.getAxisRight().setEnabled(false);
        Legend l = mChart.getLegend();
        l.setForm(Legend.LegendForm.LINE);
    }

初始化X和Y两个Arraylist

    ArrayList<String> xVals = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            xVals.add((i) + "");
        }

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

        for (int i = 0; i < count; i++) {

            float mult = (range + 1);
            float val = (float) (Math.random() * mult) + 3;// + (float)
            yVals.add(new Entry(val, i));
        }

根据采样值（Y值）生成DataSet并设置折线图的样式

  // create a dataset and give it a type
        LineDataSet set1 = new LineDataSet(yVals, "DataSet 1");
        set1.setDrawCircles(true);
        set1.setColor(ColorTemplate.getHoloBlue());
        set1.setAxisDependency(YAxis.AxisDependency.LEFT);
        set1.setColor(ColorTemplate.getHoloBlue());
        set1.setCircleColor(Color.WHITE);
        set1.setLineWidth(2f);
        set1.setCircleSize(3f);
        set1.setFillAlpha(65);
        set1.setFillColor(ColorTemplate.getHoloBlue());
        set1.setHighLightColor(Color.rgb(244, 117, 117));
        set1.setDrawCircleHole(false);

将该LineDataSet加入DataSets集合

        ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
        dataSets.add(set1); // add the datasets

根据该DataSets以及X值生成data对象（LineData）

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

使用 LinChart.setData(LineData) 填充图标

        // set data
        mChart.setData(data);

使用LineChart.animateX/animateY/animateXY 制作动画

<span style="white-space:pre">	</span>mChart.animateX(3000);

关于动画效果，可以参考下MPAndroidChart 教程：动画写的很详细

相关API 可以参考GitHub上相关wiki ： MPAndroidChart-Wiki，中文版： MPAndroidChart-Wiki-CN

另外，我也整理了下比较常用的：

LineChart
	setOnChartGestureListener				  // 设置表格上动作监听并进行回调
	setOnChartValueSelectedListener			  // 设置表格上的点被点击的回调函数
	setDrawGridBackground                     // 是否显示表格颜色 
	setDescription							  // 数据描述  
	setNoDataTextDescription				  // 数据为空时描述
	setScaleEnabled                           // 是否可以缩放 
	setDragEnabled                            // 是否可以拖拽  
	setHighlightPerDragEnabled				  // 能否拖拽高亮线(数据点与坐标的提示线)
	setPinchZoom                              // 是否按X/Y按比例缩放，如果为false,X/Y可以分别缩放
	getXAxis								  // 获取X轴
	getYAxis								  // 获取Y轴
	getLegend								  // 获取图例
	animateX								  // X轴方向动画
	animateY								  // Y轴方向动画
	setData(LineData)                         // 设置数据
	notifyDataSetChanged                      // 数据更新提示 
	setVisibleXRangeMaximum                   // 设置最大X轴显示范围
	moveViewToX                               // X轴方向移动
XAxis/YAxis
	removeAllLimitLines                       // 移除所有限制线，防止重叠
	setLabelCount                             // 坐标轴上标签显示的个数
	setStartAtZero							  // 坐标轴是否从0开始
LineDataSet
	setDrawCircles                            // 设置节点为圆形
	etCircleColor							  // 设置圆形节点颜色
	setCircleSize							  // 设置圆形节点大小
	setColor								  // 设置折线颜色			
	setAxisDependency                         // 以左边坐标轴为准 还是以右边坐标轴为基准
	setLineWidth							  // 设置折线宽度
	setFillAlpha							  // 设置填充Alpha值
	setDrawFilled							  // 设置是否填充
	setFillColor							  // 设置填充的颜色
	setHighLightColor					      // 设置高亮线的颜色		
	setDrawCircleHole						  // 设置节点是否为同心圆
	setCircleColorHole						  // 设置节点同心圆内部的颜色
	setDrawCubic							  // 设置折线是否顺滑
LineDate
	addDataSet                                // 添加LineDataSet到LineData中
	addXValue                                 // 添加X轴坐标到LineData中
	addEntry								  // 添加坐标值（X,Y）到LineData中
	
Legend
	setForm									  // 设置图例样式

更多相关文章

随机推荐