近日需要做图表结构的项目,目前最火的就是hellocharts 和MPAndroidChart 相对来说hellocharts集成比较简单:
官网地址 https://github.com/lecho/hellocharts-android和https://github.com/PhilJay/MPAndroidChart
参考地址:https://blog.csdn.net/ITermeng/article/details/70135539
中文版注释版:https://github.com/IamXiaRui/Android_5.0_ViewDemo/tree/master/HelloChartsDemo
针对hellocharts进行了一些了解和心得给大家共同分享一下,不足之处多多指教:
一、柱状图
简单的集成:
(1)在AndroidStudio的build.gradle中添加依赖:
dependencies{ compile 'com.github.lecho:hellocharts-library:1.5.8@aar' }
(2)引用控件
<lecho.lib.hellocharts.view.ColumnChartView android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="400dp" android:layout_margin="10dp"/>
(3)设置数据以及详细参数
@Bind(R.id.chart) ColumnChartView ColumnChartView; /*========== 数据相关 ==========*/ private ColumnChartData mColumnChartData; //柱状图数据 public final static String[] xValues = new String[]{"语文", "数学", "英语", "音乐", "科学", "体育"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_surface); ButterKnife.bind(this); initDate(); } private void initDate() { /*========== 柱状图数据填充 ==========*/ List<Column> columnList = new ArrayList<>(); //柱子列表 List<SubcolumnValue> subcolumnValueList; //子柱列表(即一个柱子,因为一个柱子可分为多个子柱) List<AxisValue> axisValues = new ArrayList<>();//创建x轴数据 for (int i = 0; i < 6; ++i) { subcolumnValueList = new ArrayList<>();//每个子柱的集合 subcolumnValueList.add(new SubcolumnValue((float) Math.random() * 100, ChartUtils.pickColor()));//每个子柱集合的数据 axisValues.add(new AxisValue(i).setLabel(xValues[i])); Column column = new Column(subcolumnValueList);//创建子柱数据 column.setHasLabels(true); //设置列标签 columnList.add(column);//添加柱子数据 } mColumnChartData = new ColumnChartData(columnList); //设置数据 /*===== 坐标轴相关设置 =====*/ Axis axisX = new Axis(axisValues);//设置横坐标柱子下面的分类 Axis axisY = new Axis().setHasLines(true); axisX.setName("考试科目"); //设置横轴名称 axisY.setName("成绩"); //设置竖轴名称 mColumnChartData.setAxisXBottom(axisX); //设置横轴 mColumnChartData.setAxisYLeft(axisY); //设置竖轴 ColumnChartView.setZoomEnabled(false);//不可点击 //以上所有设置的数据、坐标配置都已存放到mColumnChartData中,接下来给mColumnChartView设置这些配置 ColumnChartView.setColumnChartData(mColumnChartData); Viewport v = ColumnChartView.getMaximumViewport();//设置y轴的长度 v.top = 103; ColumnChartView.setCurrentViewport(v); }
效果图如下:
简单的柱形图就出来了,具体的参数值已经出来,不做过多介绍
Demo地址:https://gitee.com/anan9303/Chart.git