这个效果图除了使用hellochart框架以外,还可以使用Echart完成,本人就是先用Echart写了一遍然后才回头再来用hellochart写。原因就是感觉用Android 原生调用js代码调用感觉很蛋疼,浪费我一天的工时。
示例效果图:
柱状图:
不作过多解释,网上很多示例,稍加改改就可以完成
<lecho.lib.hellocharts.view.ColumnChartView
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="10dp"/>
部分代码:
public void initdata(){
/*========== 柱状图数据填充 ==========*/
List<Column> columnList = new ArrayList<>(); //柱子列表
List<SubcolumnValue> subcolumnValueList; //子柱列表(即一个柱子,因为一个柱子可分为多个子柱)
for (int i = 0; i <columnars_list.size(); ++i) {
subcolumnValueList = new ArrayList<>();
SubcolumnValue sv=new SubcolumnValue(columnars_list.get(i).getSws(),ChartUtils.COLOR_RED);//添加收文柱子
sv.setLabel(""+columnars_list.get(i).getSws());//设置柱子显示的名称或者数字
subcolumnValueList.add(sv);
SubcolumnValue fw= new SubcolumnValue(columnars_list.get(i).getFws(),ChartUtils.COLOR_BLUE);//添加发文柱子
fw.setLabel(""+""+columnars_list.get(i).getFws());
subcolumnValueList.add(fw);
SubcolumnValue bmbls= new SubcolumnValue(columnars_list.get(i).getBmbls(),ChartUtils.COLOR_GREEN);//添加第三个柱子
bmbls.setLabel(columnars_list.get(i).getBmbls()+"");
subcolumnValueList.add(bmbls);
Column column = new Column(subcolumnValueList);
column.setHasLabels(true);
columnList.add(column);
}
mColumnChartData = new ColumnChartData(columnList); //设置数据
}
//设置横纵坐标
public void setView(){
/*===== 坐标轴相关设置 =====*/
Axis axisX = new Axis();
Axis axisY = new Axis();
ArrayList<AxisValue> axisValuesY = new ArrayList<AxisValue>();
axisX.setName("年份"); //设置横轴名称
axisY.setName("数量"); //设置竖轴名称
List<AxisValue> axisValuesX=new ArrayList<>();
for(int i=0;i<columnars_list.size();i++){
//设置X
axisValuesX.add(new AxisValue(i).setLabel(columnars_list.get(i).getYear()+""));
}
for (float j=0;j<1000;j+=10){
axisValuesY.add(new AxisValue(j).setValue(j));// 添加Y轴显示的刻度值
}
axisX.setValues(axisValuesX);
axisX.setHasLines(true);
axisY.setLineColor(Color.BLACK);
axisX.setTextColor(Color.BLACK);//设置字体颜色
axisY.setValues(axisValuesY);
axisY.setHasLines(true);
axisY.setTextColor(Color.BLACK);
axisY.setLineColor(Color.BLACK);
axisY.setTextSize(18);
// mColumnChartData.setv
mColumnChartData.setAxisXBottom(axisX); //设置横轴
mColumnChartData.setAxisYLeft(axisY); //设置竖轴
//以上所有设置的数据、坐标配置都已存放到mColumnChartData中,接下来给mColumnChartView设置这些配置
chartView.setColumnChartData(mColumnChartData);
}
以上就是分组柱状图的关键代码