hellocharts图表插件---折线图

膜拜了些大神的笔记，觉得十分有用，附上网址：
1.很好上手的折线图：
手把手教你实现折线图之——安卓最好用的图表库hellocharts之最详细的使用介绍 - q2nAmor - CSDN博客 http://blog.csdn.net/u012534831/article/details/51505683
2.特别齐全的各种图表，简直牛掰啦：
hellocharts-android开源图表库（效果非常好） - 泡在网上的日子 http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1107/1930.html

效果如图所示：

1.在app的gradle里声明一下：

//引入hellocharts图表插件    compile 'com.github.lecho:hellocharts-android:v1.5.8'

2.在libs文件家里添加jar包

可以进行各种编码了。

补充代码：
1.activity的xml布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <lecho.lib.hellocharts.view.LineChartView        android:id="@+id/linechart"        android:layout_marginTop="20dp"        android:layout_width="match_parent"        android:layout_height="300dp"/></LinearLayout>

2.acitivty的代码：

//libs文件夹里放入了hellocharts工具包插件public class LineChartActivity extends AppCompatActivity {    @BindView(R.id.linechart)    LineChartView lineChart;    String[] date = {"5-23","5-22","6-22","5-23","5-22","2-22","5-22","4-22","9-22","10-22","11-22",            "12-22","1-22","6-22","5-23","5-22","2-22","5-22","4-22",            "9-22","10-22","11-22","12-22","4-22","9-22","10-22","11-22","zxc"};//X轴的标注    int[] score= {74,22,18,79,20,74,20,74,42,90,74,42,90,50,42,90,            33,10,74,22,18,79,20,74,22,18,79,20};//图表的数据    private List<PointValue> mPointValues = new ArrayList<PointValue>();    private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_linechart);        ButterKnife.bind(this);        getAxisXLables();//获取x轴的标注        getAxisPoints();//获取坐标点        initLineChart();//初始化    }    /**     * 初始化LineChart的一些设置     */    private void initLineChart(){        Line line = new Line(mPointValues).setColor(Color.parseColor("#FFCD41"));  //折线的颜色        List<Line> lines = new ArrayList<Line>();        line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状        // 这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.SQUARE）        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(true);  //X轴下面坐标轴字体是斜的显示还是直的，true是斜的显示//      axisX.setTextColor(Color.WHITE);  //设置字体颜色        axisX.setTextColor(Color.parseColor("#363636"));//黑色        axisX.setName("未来几天的天气");  //表格名称        axisX.setTextSize(16);//设置字体大小        axisX.setMaxLabelChars(7); //最多几个X轴坐标，        // 意思就是你的缩放让X轴上数据的个数7<=x<=mAxisValues.length        axisX.setValues(mAxisXValues);  //填充X轴的坐标名称        data.setAxisXBottom(axisX); //x 轴在底部//      data.setAxisXTop(axisX);  //x 轴在顶部        axisX.setHasLines(false); //x 轴分割线        Axis axisY = new Axis();  //Y轴        axisY.setName("新的设置");//y轴标注        axisY.setTextColor(Color.parseColor("#363636"));//黑色        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);        /**注：下面的7，10只是代表一个数字去类比而已         * 见（http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2）;         * 下面几句可以设置X轴数据的显示个数（x轴0-7个数据），当数据点个数小于（29）的时候，缩小到极致hellochart默认的是所有显示。当数据点个数大于（29）的时候，         * 若不设置axisX.setMaxLabelChars(int count)这句话,则会自动适配X轴所能显示的尽量合适的数据个数。         * 若设置axisX.setMaxLabelChars(int count)这句话,         * 33个数据点测试，若 axisX.setMaxLabelChars(10);里面的10大于v.right= 7; 里面的7，则         刚开始X轴显示7条数据，然后缩放的时候X轴的个数会保证大于7小于10         若小于v.right= 7;中的7,反正我感觉是这两句都好像失效了的样子 - -!         * 并且Y轴是根据数据的大小自动设置Y轴上限         * 若这儿不设置 v.right= 7; 这句话，则图表刚开始就会尽可能的显示所有数据，交互性太差         */        Viewport v = new Viewport(lineChart.getMaximumViewport());        v.left = 0;        v.right= 7;        lineChart.setCurrentViewport(v);    }    /**     * X 轴的显示     */    private void getAxisXLables(){        for (int i = 0; i < date.length; i++) {            mAxisXValues.add(new AxisValue(i).setLabel(date[i]));        }    }    /**     * 图表的每个点的显示     */    private void getAxisPoints(){        for (int i = 0; i < score.length; i++) {            mPointValues.add(new PointValue(i, score[i]));        }    }}

—-补充——

1.界面xml布局中：

 <TextView                    android:gravity="bottom"                    android:id="@+id/tv_type"                    android:textColor="@color/app_white"                    android:textSize="22sp"                    android:layout_width="0dp"                    android:layout_weight="1"                    android:layout_height="match_parent" />                <TextView                    android:layout_marginLeft="10dp"                    android:id="@+id/tv_date"                    android:textSize="14sp"                    android:textColor="@color/app_white"                    android:gravity="bottom"                    android:layout_width="wrap_content"                    android:layout_height="match_parent" />                <TextView                    android:id="@+id/tv_result"                    android:textColor="@color/app_white"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_marginLeft="10dp"                    android:textStyle="bold"                    android:gravity="bottom"                    android:textSize="22sp"/>

 <lecho.lib.hellocharts.view.LineChartView                android:id="@+id/linechart"                android:visibility="gone"                android:layout_width="match_parent"                android:layout_height="match_parent" />

2.界面activity中：

折线图所示数据：

 String[] yearsX = {"2013", "2014", "2015", "2016", "2017"};//X轴的标注:年份    int[] heightY= { 136, 142, 148, 153, 155};//图表的数据：身高

linechart.setZoomEnabled(false);//设置是否可以缩放        linechart.setInteractive(true);//设置是否可以平移        //X轴        Axis axisX = new Axis().setHasLines(true);        axisX.setLineColor(getResources().getColor(R.color.app_white));        axisX.setTextColor(getResources().getColor(R.color.app_white));        ArrayList<AxisValue> axisValuesX = new ArrayList<AxisValue>();//定义X轴刻度值的数据集合        ArrayList<PointValue> pointValues = new ArrayList<>();        //循环为节点、X、Y轴添加数据        for (int j = 0; j < yearsX.length; j++) {            axisValuesX.add(new AxisValue(j).setValue(j).setLabel( yearsX[j]));// 添加X轴显示的刻度值        }        tvType.setText("身高");                linechart.setBackgroundColor(Color.parseColor("#f9c172"));                chartBar.setBackgroundColor(Color.parseColor("#f9c172"));                for (int i = 0; i < heightY.length; i++) {                    pointValues.add(new PointValue(i, heightY[i]));                } axisX.setValues(axisValuesX);        //线条        List<Line> lines = new ArrayList<Line>();//定义线的集合        Line line = new Line(pointValues);//将值设置给折线        line.setColor(getResources().getColor(R.color.app_white));// 设置折线颜色        line.setStrokeWidth(3);// 设置折线宽度        line.setFilled(false);// 设置折线覆盖区域是否填充        line.setCubic(true);// 是否设置为立体的        line.setPointColor(getResources().getColor(R.color.app_white));// 设置节点颜色        line.setPointRadius(5);// 设置节点半径        line.setHasLabels(true);// 是否显示节点数据        line.setHasLines(true);// 是否显示折线        line.setHasPoints(true);// 是否显示节点        line.setShape(ValueShape.CIRCLE);// 节点图形样式 DIAMOND菱形、SQUARE方形、CIRCLE圆形        //   line.setHasLabelsOnlyForSelected(true);// 隐藏数据，触摸可以显示        lines.add(line);// 将数据集合添加线        LineChartData chartData = new LineChartData(lines);//将线的集合设置为折线图的数据        // chartData.setAxisYLeft(axisY);// 将Y轴属性设置到左边        chartData.setAxisXBottom(axisX);// 将X轴属性设置到底部        //chartData.setAxisYRight(axisYRight);//设置右边显示的轴        // chartData.setAxisXTop(axisXTop);//设置顶部显示的轴        chartData.setBaseValue(20);// 设置反向覆盖区域颜色        chartData.setValueLabelBackgroundAuto(true);// 设置数据背景是否跟随节点颜色        chartData.setValueLabelBackgroundColor(getResources().getColor(R.color.app_polygon));// 设置数据背景颜色        chartData.setValueLabelBackgroundEnabled(true);// 设置是否有数据背景        chartData.setValueLabelsTextColor(getResources().getColor(R.color.app_gray));// 设置数据文字颜色        chartData.setValueLabelTextSize(12);// 设置数据文字大小        chartData.setValueLabelTypeface(Typeface.MONOSPACE);// 设置数据文字样式        // chart.setLineChartData(LineChartData data);//最后为图表设置数据，数据类型为LineChartDat        linechart.setLineChartData(chartData);        linechart.setOnValueTouchListener(FrChart.this);

implements LineChartOnValueSelectListener

 @Override    public void onValueSelected(int i, int i1, PointValue pointValue) {        tvDate.setText( String.valueOf( yearsX[i1] ) + "/03/11");        switch ( position){            case 2:                tvResult.setText( String.valueOf( heightY[i1] ) + " cm");                break;            case 3:                tvResult.setText( String.valueOf( eyesightY[i1] ) );                break;            case 4:                tvResult.setText( String.valueOf( weightY[i1] ) + " kg");                break;        }    }