使用HelloCharts开源框架搭建一系列炫酷图表，柱形图，折线图，饼状图和动画特效，抽丝剥茧带你认识图表之美
实际开发中经常会使用第三方的图标库显示数据，其中HelloCharts就是一款非常优秀的开源图表库。相比其他图表库来说，HelloCharts的功能更加完善，界面更加美观，坐标更加准确，并且HelloCharts还支持图标缩放，平移等特性。本文将带领读者进一步学习HelloCharts的使用，制作美观的界面统计图。
首先libs添加:
hellocharts-library-1.5.8.jar (自己个人更喜欢用百度等云盘存放，所以自己是保存在云盘的)；
另外给出下载地址：/detail/u012534831/9531494
1.线形图
线形图是通过LineChartView控件实现的。
任务1 线形图界面
activity_main.xmllayout_line_chart.xml （创建线性图界面）添加相应的库和控件
任务2 创建ViewPagerAdapter
由于在activity_main.xml文件中添加了一个ViewPager控件，用于加载先行图，饼状图，以及柱状图的3个界面并且使其可以左右滑动，因此需要创建一个ViewPagerAdapter对ViewPager控件进行数据填充
任务3 线形图界面逻辑代码
线性图界面主要是根据一直的X轴数据以及一周的温度数据显示一周温度的线形图。
2 饼状图
通过PieChartView控件实现
3 柱状图
通过ColumnChartVIew控件实现的
XML添加一下布局
1 <lecho.lib.hellocharts.view.LineChartView2 android:id="@+id/line_chart"3 android:layout_width="fill_parent"4 android:layout_height="300dp"/>
然后一个是横坐标，一个是数据点数组。
private LineChartView lineChart;String[] date = {"10-22","11-22","12-22","1-22","6-22","5-23","5-22","6-22","5-23","5-22"};//X轴的标注int[] score= {50,42,90,33,10,74,22,18,79,20};//图表的数据点private List<PointValue> mPointValues = new ArrayList<PointValue>();private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();
oncreate中3个方法：
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);lineChart = (LineChartView)findViewById(R.id.line_chart);getAxisXLables();//获取x轴的标注getAxisPoints();//获取坐标点initLineChart();//初始化}
/*** 设置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]));}}
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.DIAMOND）line.setCubic(false);//曲线是否平滑，即是曲线还是折线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.GRAY); //设置字体颜色//axisX.setName("date"); //表格名称axisX.setTextSize(10);//设置字体大小axisX.setMaxLabelChars(8); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.lengthaxisX.setValues(mAxisXValues); //填充X轴的坐标名称data.setAxisXBottom(axisX); //x 轴在底部//data.setAxisXTop(axisX); //x 轴在顶部axisX.setHasLines(true); //x 轴分割线// Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)Axis axisY = new Axis(); //Y轴axisY.setName("");//y轴标注axisY.setTextSize(10);//设置字体大小data.setAxisYLeft(axisY); //Y轴设置在左边//data.setAxisYRight(axisY); //y轴设置在右边//设置行为属性，支持缩放、滑动以及平移lineChart.setInteractive(true);lineChart.setZoomType(ZoomType.HORIZONTAL);lineChart.setMaxZoom((float) 2);//最大方法比例lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);lineChart.setLineChartData(data);lineChart.setVisibility(View.VISIBLE);/**注：下面的7，10只是代表一个数字去类比而已* 当时是为了解决X轴固定数据个数。见（http://forum.xda-/tools/programming/library-hellocharts-charting-library-t2904456/page2）;*/Viewport v = new Viewport(lineChart.getMaximumViewport());v.left = 0;v.right = 7;lineChart.setCurrentViewport(v);}
请看下图：
这4句代码可以设置X轴数据的显示个数（x轴0-7个数据）。
1 当数据点个数小于（29）的时候，缩小到极致hellochart默认的是所有显示。
2 当数据点个数大于（29）的时候。
2.1 若不设置axisX.setMaxLabelChars(int count)这句话,则会自动适配X轴所能显示的尽量合适的数据个数。
2.2 若设置axisX.setMaxLabelChars(int count)这句话,33个数据点测试，
2.2.1 若 axisX.setMaxLabelChars(10); 里面的10大于v.right= 7; 里面的7，则 刚开始X轴显示7条数据，然后缩放的时候X轴的个数会保证大于7小于10
2.2.2 若小于v.right= 7;中的7,反正我感觉是这两句都好像失效了的样子 - -! 若这儿不设置 v.right= 7; 这句话，则图表刚开始就会尽可能的显示所有数据，交互性太差
下面看一下固定Y轴个数的解决方案：
例：想要固定Y轴数据从0-100
Axis axisY = new Axis().setHasLines(true);axisY.setMaxLabelChars(6);//max label length, for example 60List<AxisValue> values = new ArrayList<>();for(int i = 0; i < 100; i+= 10){AxisValue value = new AxisValue(i);String label = "";value.setLabel(label);values.add(value);}axisY.setValues(values);
源码github地址：/qht1003077897/hellocharts-line.git
最后
这是一个知名博主的解读的开源项目，很nb。
