安卓折线图表之Hellocharts和MPAndroidChart实例

前一阵项目中用到折线图表，这里做个总结。
Hellocharts和MPAndroidChart各有优劣，个人觉得，Hellocharts在效果展示及动态处理上更亲和用户，而MPAndroidChart则在图表处理能力上更胜一筹， 两者的代码调用极其相似。

本文的案例是借鉴了前辈的案例，在其基础上做出的修改，另外，本文只是作为个人总结
目前网络上这两个框架的文章虽然不多，但是优秀的各位已经可以搜索找到了，不再赘述。

---

上效果图：

MPAndroidChart的效果图

---

主要的方法封装如下：

//三步走，1.获取LineChart，2.填充数据 3.定义样式

第一步、 获取控件，封装 数据 和 样式 两个方法   

    mLineChart = (LineChart) findViewById(R.id.chart);
    LineData mLineData = getLineData(36, 5);
    showChart(mLineChart, mLineData, Color.parseColor("#cccccc"));

第二步 、 填充数据

private LineData getLineData(int count, float range) {
    ArrayList<String> xValues = new ArrayList<String>();
    for (int i = 0; i < count; i++) {
        // x轴显示的数据，这里默认使用数字下标显示
        xValues.add("" + i);
    }
    // y轴的数据
    ArrayList<Entry> yValues = new ArrayList<Entry>();
    for (int i = 0; i < count; i++) {
        float value = (float) (Math.random() * range) + 3;
        yValues.add(new Entry(value, i));
    }

    // create a dataset and give it a type
    // y轴的数据集合
    LineDataSet lineDataSet = new LineDataSet(yValues, "测试折线图" /* 显示在比例图上 */);
    // mLineDataSet.setFillAlpha(110);
    // mLineDataSet.setFillColor(Color.RED);

    // 用y轴的集合来设置参数
    lineDataSet.setLineWidth(1.75f); // 线宽
    lineDataSet.setCircleSize(3f);// 显示的圆形大小
    lineDataSet.setColor(Color.WHITE);// 显示颜色
    lineDataSet.setCircleColor(Color.WHITE);// 圆形的颜色
    lineDataSet.setHighLightColor(Color.WHITE); // 高亮的线的颜色

    ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();
    lineDataSets.add(lineDataSet); // add the datasets

    // create a data object with the datasets
    LineData lineData = new LineData(xValues, lineDataSets);

    return lineData;
}

---

第三步.具体的样式方法：

    // 设置显示的样式
    private void showChart(LineChart lineChart, LineData lineData, int color) {
        // 是否在折线图上添加边框
        lineChart.setDrawBorders(false);

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

        // enable / disable grid background
        lineChart.setDrawGridBackground(false); // 是否显示表格颜色
        lineChart.setGridBackgroundColor(Color.WHITE & 0x70FFFFFF); // 表格的的颜色，在这里是是给颜色设置一个透明度

        // enable touch gestures
        lineChart.setTouchEnabled(false); // 设置是否可以触摸

        // enable scaling and dragging
        lineChart.setDragEnabled(false);// 是否可以拖拽
        lineChart.setScaleEnabled(false);// 是否可以缩放

        // if disabled, scaling can be done on x- and y-axis separately
        lineChart.setPinchZoom(false);//

        lineChart.setBackgroundColor(color);// 设置背景

        // add data
        lineChart.setData(lineData); // 设置数据

        // get the legend (only possible after setting data)
        Legend mLegend = lineChart.getLegend(); // 设置比例图标示，就是那个一组y的value的

        // modify the legend ...
        // mLegend.setPosition(LegendPosition.LEFT_OF_CHART);
        mLegend.setForm(LegendForm.CIRCLE);// 样式
        mLegend.setFormSize(6f);// 字体
        mLegend.setTextColor(Color.RED);// 颜色
        // mLegend.setTypeface(mTf);// 字体

        // lineChart.animateX(2500); // 立即执行的动画,x轴
    }

---

HelloCharts的效果图

---

第一步：

        主要的方法封装如下：
        lineChart = (LineChartView)findViewById(R.id.line_chart);
        getAxisXLables();//获取x轴的标注
        getAxisPoints();//获取坐标点
        initLineChart();//初始化

第二步：

    /**
     * X 轴的显示
     */
    private void getAxisXLables(){
        for (int i = 0; i < date.length; i++) {    
            mAxisXValuesList.add(new AxisValue(i).setLabel(date[i]));    
        }       
    }
    /**
     * 图表的每个点的显示
     */
    private void getAxisPoints(){
        for (int i = 0; i < score.length; i++) {    
            mPointValuesList.add(new PointValue(i, score[i]));      
        }       
    }

第三步

/**
 * 初始化LineChart的一些设置
 */
private void initLineChart(){
    Line line = new Line(mPointValuesList).setColor(Color.parseColor("#336699"));  //折线的颜色
    List<Line> lines = new ArrayList<Line>();    
    line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状  这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND）
    line.setCubic(false);//曲线是否平滑
//  line.setStrokeWidth(3);//线条的粗细，默认是3
    line.setFilled(false);//是否填充曲线的面积
    line.setHasLabels(true);//曲线的数据坐标是否加上备注
//  line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据（设置了这个line.setHasLabels(true);就无效）

    line.setHasLines(true);//是否用直线显示。如果为false 则没有曲线只有点显示    
    line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示    
    lines.add(line);  
    LineChartData data = new LineChartData();  
    data.setLines(lines);  

    //坐标轴  
    Axis axisX = new Axis(); //X轴  
    axisX.setHasTiltedLabels(false);  //X轴下面坐标轴字体是斜的显示还是直的，true是斜的显示 
    axisX.setTextColor(Color.WHITE);  //设置字体颜色
    axisX.setTextColor(Color.parseColor("#336699"));//灰色

    axisX.setName("未来几天的天气");  //表格名称
    axisX.setTextSize(11);//设置字体大小
    axisX.setMaxLabelChars(7); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisValues.length
    axisX.setValues(mAxisXValuesList);  //填充X轴的坐标名称
    data.setAxisXBottom(axisX); //x 轴在底部     

    Axis axisY = new Axis();  //Y轴  
    axisY.setName("");//y轴标注
    axisY.setTextSize(11);//设置字体大小
    data.setAxisYLeft(axisY);  //Y轴设置在左边
  //data.setAxisYRight(axisY);  //y轴设置在右边

  //设置行为属性，支持缩放、滑动以及平移  
    lineChart.setInteractive(true); 
    lineChart.setZoomType(ZoomType.HORIZONTAL);  //缩放类型，水平
    lineChart.setMaxZoom((float) 3);//缩放比例
    lineChart.setLineChartData(data);  
    lineChart.setVisibility(View.VISIBLE);
}

---

OK，写到这里吧，主要是给自己做个记录

---

上源码

HelloCharts示例代码：
http://download.csdn.net/detail/lebang08/9630340

MPAndroidChart：
http://download.csdn.net/detail/lebang08/9630341