本文小编为大家详细介绍“怎么用Android的HelloChart绘制多折线图”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用Android的HelloChart绘制多折线图”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1.添加依赖库

compile'com.github.lecho:hellocharts-android:v1.5.8'

2.布局文件

<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><includeandroid:id="@+id/include_id"layout="@layout/titlelayout_theme"android:layout_width="match_parent"android:layout_height="wrap_content"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:padding="4dp"android:orientation="horizontal"><Viewandroid:layout_width="6dp"android:layout_height="6dp"android:background="#BF0815"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:text="噪音"android:layout_marginLeft="5dp"android:textColor="@color/common_gray3"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:padding="4dp"android:orientation="horizontal"><Viewandroid:layout_width="6dp"android:layout_height="6dp"android:background="#088B05"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:text="温度"android:layout_marginLeft="5dp"android:textColor="@color/common_gray3"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:padding="4dp"android:orientation="horizontal"><Viewandroid:layout_width="6dp"android:layout_height="6dp"android:background="#0862D8"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:text="pm2.5"android:layout_marginLeft="5dp"android:textColor="@color/common_gray3"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:padding="4dp"android:orientation="horizontal"><Viewandroid:layout_width="6dp"android:layout_height="6dp"android:background="#552705"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:text="风速"android:layout_marginLeft="5dp"android:textColor="@color/common_gray3"/></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:padding="4dp"android:orientation="horizontal"><Viewandroid:layout_width="6dp"android:layout_height="6dp"android:background="#6221D1"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="10sp"android:text="pm10"android:layout_marginLeft="5dp"android:textColor="@color/common_gray3"/></LinearLayout></LinearLayout><lecho.lib.hellocharts.view.LineChartViewandroid:id="@+id/line_chart"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

3.Activity类

packagecom.aldx.hccraftsman.activity;importandroid.content.Context;importandroid.content.Intent;importandroid.graphics.Color;importandroid.graphics.Matrix;importandroid.graphics.Typeface;importandroid.os.Bundle;importandroid.view.View;importandroid.view.Window;importandroid.view.WindowManager;importandroid.widget.ImageView;importandroid.widget.LinearLayout;importandroid.widget.TextView;importcom.aldx.hccraftsman.R;importcom.aldx.hccraftsman.application.Application;importcom.aldx.hccraftsman.base.BaseActivity;importcom.aldx.hccraftsman.entity.DustLineChart;importcom.aldx.hccraftsman.entity.DustLineChartModel;importcom.aldx.hccraftsman.entity.TempChartData;importcom.aldx.hccraftsman.jsonparse.JSONObject;importcom.aldx.hccraftsman.jsonparse.ReflectUtil;importcom.aldx.hccraftsman.okHttp.LoadingDialogCallback;importcom.aldx.hccraftsman.utils.Api;importcom.aldx.hccraftsman.utils.Constants;importcom.aldx.hccraftsman.utils.LogUtil;importcom.aldx.hccraftsman.utils.Utils;importcom.lzy.okgo.OkGo;importjava.text.ParseException;importjava.util.ArrayList;importjava.util.Calendar;importjava.util.Date;importjava.util.List;importbutterknife.BindView;importbutterknife.ButterKnife;importbutterknife.OnClick;importcn.qqtheme.framework.picker.DatePicker;importcn.qqtheme.framework.picker.DateTimePicker;importlecho.lib.hellocharts.gesture.ZoomType;importlecho.lib.hellocharts.model.Axis;importlecho.lib.hellocharts.model.AxisValue;importlecho.lib.hellocharts.model.Line;importlecho.lib.hellocharts.model.LineChartData;importlecho.lib.hellocharts.model.PointValue;importlecho.lib.hellocharts.model.ValueShape;importlecho.lib.hellocharts.model.Viewport;importlecho.lib.hellocharts.view.LineChartView;importokhttp3.Call;importokhttp3.Response;/***author:chenzheng*createdon:2017/9/2910:18*description:*/publicclassDustLineChartActivityextendsBaseActivity{@BindView(R.id.line_chart)LineChartViewlineChart;@BindView(R.id.back_iv)ImageViewbackIv;@BindView(R.id.layout_back)LinearLayoutlayoutBack;@BindView(R.id.title_tv)TextViewtitleTv;@BindView(R.id.right_tv)TextViewrightTv;@BindView(R.id.layout_right)LinearLayoutlayoutRight;privateStringprojectId;privateList<Integer>colors=newArrayList<>();privateList<TempChartData>listTemp=newArrayList<TempChartData>();//数据privateList<AxisValue>mAxisXValues=newArrayList<AxisValue>();//x轴方向的坐标数据privateList<AxisValue>mAxisYValues=newArrayList<AxisValue>();//y轴方向的坐标数据privateList<Float>distanceList=newArrayList<Float>();privatebooleanhasAxes=true;//是否有轴，x和y轴privatebooleanhasAxesNames=true;//是否有轴的名字privatebooleanhasLines=true;//是否有线（点和点连接的线，选择false只会出现点）privatebooleanhasPoints=true;//是否有点（每个值的点）privateValueShapeshape=ValueShape.CIRCLE;//点显示的形式，圆形，正方向，菱形privatebooleanisFilled=false;//是否是填充privatebooleanhasLabels=true;//每个点是否有名字privatebooleanisCubic=false;//是否是立方的，线条是直线还是弧线privatebooleanhasLabelForSelected=false;//每个点是否可以选择（点击效果）privateLineChartDatadata;//折线图封装的数据类@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);setContentView(R.layout.activity_dust_line_chart);projectId=getIntent().getStringExtra("projectId");ButterKnife.bind(this);initView();initData();doRequest();}privatevoidinitData(){//颜色集合colors.add(0xff0862D8);colors.add(0xff6221D1);colors.add(0xff552705);colors.add(0xff088B05);colors.add(0xffBF0815);}privatevoidinitView(){titleTv.setText("扬尘监测折线图");Calendarcalendar1=Calendar.getInstance();Stringsss=Utils.DATE_SIMPLE_FORMATER.format(calendar1.getTime());rightTv.setText(sss);layoutRight.setVisibility(View.VISIBLE);}publicvoiddoRequest(){OkGo.get(Api.GET_MONITOR_MONTH_BY_PROJECT_ID).tag(this).params("projectId",projectId).params("time",rightTv.getText().toString()).execute(newLoadingDialogCallback(this,Constants.LOADING_TXT){@OverridepublicvoidonSuccess(Strings,Callcall,Responseresponse){DustLineChartModeldustLineChartModel=null;try{dustLineChartModel=(DustLineChartModel)ReflectUtil.copy(DustLineChartModel.class,newJSONObject(s));}catch(Exceptione){e.printStackTrace();}if(dustLineChartModel!=null){if(dustLineChartModel.code==Api.SUCCESS_CODE){if(dustLineChartModel.data!=null){setLineChartData(dustLineChartModel.data);}}else{Application.showCodeToast(DustLineChartActivity.this,dustLineChartModel.code);}}}@OverridepublicvoidonError(Callcall,Responseresponse,Exceptione){super.onError(call,response,e);Application.showResultToast(DustLineChartActivity.this,call,e);}});}privatevoidsetLineChartData(List<DustLineChart>dlcList){listTemp.clear();mAxisXValues.clear();mAxisYValues.clear();distanceList.clear();floatyMax=0;try{intxCount=0;CalendarcurCalendar=Calendar.getInstance();StringcurDateStr=Utils.DATE_SIMPLE_FORMATER.format(curCalendar.getTime());if(rightTv.getText().toString().equals(curDateStr)){xCount=curCalendar.get(Calendar.DAY_OF_MONTH);}else{DatequeryDate=Utils.DATE_FORMATER.parse(rightTv.getText().toString()+"-01");CalendarqueryCalendar=Calendar.getInstance();queryCalendar.setTime(queryDate);xCount=queryCalendar.getActualMaximum(Calendar.DAY_OF_MONTH);}LogUtil.e("xCount="+xCount);for(intj=1;j<=xCount;j++){booleanisFinded=false;for(DustLineChartdlc:dlcList){StringtempStr=dlc.time;if(!Utils.isEmpty(tempStr)){DatetempDate=Utils.DATE_FORMATER.parse(tempStr);CalendartempCalendar=Calendar.getInstance();tempCalendar.setTime(tempDate);if(j==(tempCalendar.get(Calendar.DAY_OF_MONTH))){isFinded=true;if(Utils.toFloat(dlc.pm2)>yMax){yMax=Utils.toFloat(dlc.pm2);}if(Utils.toFloat(dlc.pm10)>yMax){yMax=Utils.toFloat(dlc.pm10);}if(Utils.toFloat(dlc.windspeed)>yMax){yMax=Utils.toFloat(dlc.windspeed);}if(Utils.toFloat(dlc.temperature)>yMax){yMax=Utils.toFloat(dlc.temperature);}if(Utils.toFloat(dlc.noise)>yMax){yMax=Utils.toFloat(dlc.noise);}listTemp.add(newTempChartData(j+"",Utils.toFloat(dlc.pm2),Utils.toFloat(dlc.pm10),Utils.toFloat(dlc.windspeed),Utils.toFloat(dlc.temperature),Utils.toFloat(dlc.noise)));break;}}}if(!isFinded){listTemp.add(newTempChartData(j+"",0.0f,0.0f,0.0f,0.0f,0.0f));}}//设置x轴坐标，显示的是时间5-1,5-2.。。。mAxisXValues.clear();for(inti=1;i<=xCount;i++){//mClockNumberLengthmAxisXValues.add(newAxisValue(i).setLabel(i+""));}mAxisYValues.clear();floattemp=(yMax+10)/10;for(intk=0;k<10;k++){floatttt=temp*k;floatfff=Utils.toFloat(((int)ttt)+"");mAxisYValues.add(newAxisValue(fff).setLabel(""+(int)fff));}//获取距离for(inti=1;i<=listTemp.size();i++){floatapart=i;//得到的拒Y轴的距离distanceList.add(apart);}//存放线条对象的集合List<Line>lines=newArrayList<Line>();lines.clear();//把数据设置到线条上面去for(inti=0;i<5;++i){List<PointValue>values=newArrayList<PointValue>();for(intj=0;j<listTemp.size();++j){//i=0是最高温度的线，i=1,是最低温度的线//PointValue的两个参数值，一个是距离y轴的长度距离，另一个是距离x轴长度距离if(i==0){values.add(newPointValue(distanceList.get(j),listTemp.get(j).pm2).setLabel(""+listTemp.get(j).pm2));}elseif(i==1){values.add(newPointValue(distanceList.get(j),listTemp.get(j).pm10).setLabel(""+listTemp.get(j).pm10));}elseif(i==2){values.add(newPointValue(distanceList.get(j),listTemp.get(j).windspeed).setLabel(""+listTemp.get(j).windspeed));}elseif(i==3){values.add(newPointValue(distanceList.get(j),listTemp.get(j).temperature).setLabel(""+listTemp.get(j).temperature));}elseif(i==4){values.add(newPointValue(distanceList.get(j),listTemp.get(j).noise).setLabel(""+listTemp.get(j).noise));}}Lineline=newLine(values);//设置线条的基本属性line.setColor(colors.get(i));line.setShape(shape);line.setCubic(isCubic);line.setFilled(isFilled);line.setHasLabels(hasLabels);line.setHasLabelsOnlyForSelected(hasLabelForSelected);line.setHasLines(hasLines);line.setHasPoints(hasPoints);line.setStrokeWidth(1);line.setPointRadius(3);lines.add(line);}data=newLineChartData(lines);if(hasAxes){AxisaxisX=newAxis();AxisaxisY=newAxis().setHasLines(true);if(hasAxesNames){axisX.setName("日期");axisY.setName("数值");}//对x轴，数据和属性的设置axisX.setTextSize(8);//设置字体的大小axisX.setHasTiltedLabels(false);//x坐标轴字体是斜的显示还是直的，true表示斜的axisX.setTextColor(Color.BLACK);//设置字体颜色axisX.setHasLines(true);//x轴的分割线axisX.setValues(mAxisXValues);//设置x轴各个坐标点名称//对Y轴，数据和属性的设置axisY.setTextSize(10);axisY.setHasTiltedLabels(false);//true表示斜的axisY.setTextColor(Color.BLACK);//设置字体颜色axisY.setValues(mAxisYValues);//设置x轴各个坐标点名称data.setAxisXBottom(axisX);//x轴坐标线的文字，显示在x轴下方//data.setAxisXTop();//显示在x轴上方data.setAxisYLeft(axisY);//显示在y轴的左边}else{data.setAxisXBottom(null);data.setAxisYLeft(null);}data.setBaseValue(2f);//设置反向覆盖区域颜色？？data.setValueLabelBackgroundAuto(false);//设置数据背景是否跟随节点颜色data.setValueLabelBackgroundColor(Color.BLUE);//设置数据背景颜色data.setValueLabelBackgroundEnabled(false);//设置是否有数据背景data.setValueLabelsTextColor(Color.RED);//设置数据文字颜色data.setValueLabelTextSize(11);//设置数据文字大小data.setValueLabelTypeface(Typeface.MONOSPACE);//设置数据文字样式lineChart.setLineChartData(data);//将数据添加到控件中lineChart.setViewportCalculationEnabled(false);lineChart.setZoomType(ZoomType.HORIZONTAL_AND_VERTICAL);//设置线条可以水平方向收缩finalViewportv=newViewport(lineChart.getMaximumViewport());v.bottom=0;v.top=yMax+10;v.left=0;v.right=listTemp.size();//listBlood.size()-1//如何解释lineChart.setMaximumViewport(v);lineChart.setCurrentViewport(v);}catch(Exceptione){e.printStackTrace();}}publicstaticvoidstartActivity(Contextcontext,StringprojectId){Intentintent=newIntent(context,DustLineChartActivity.class);intent.putExtra("projectId",projectId);context.startActivity(intent);}@OnClick({R.id.layout_back,R.id.layout_right})publicvoidonViewClicked(Viewview){switch(view.getId()){caseR.id.layout_back:finish();break;caseR.id.layout_right:chooseDate();break;}}privatevoidchooseDate(){Calendarcal=Calendar.getInstance();try{cal.setTime(Utils.DATE_FORMATER.parse(rightTv.getText().toString()+"-01"));}catch(ParseExceptione){e.printStackTrace();}CalendarcurCal=Calendar.getInstance();intcurMonth=cal.get(Calendar.MONTH)+1;intcurYear=cal.get(Calendar.YEAR);finalDatePickerpicker=newDatePicker(this,DateTimePicker.YEAR_MONTH);picker.setRangeEnd(curCal.get(Calendar.YEAR),curCal.get(Calendar.MONTH)+1);picker.setRangeStart(2010,1);picker.setUseWeight(true);picker.setSelectedItem(curYear,curMonth);picker.setOnDatePickListener(newDatePicker.OnYearMonthPickListener(){@OverridepublicvoidonDatePicked(Stringyear,Stringmonth){rightTv.setText(year+"-"+month);doRequest();}});picker.show();}}

读到这里，这篇“怎么用Android的HelloChart绘制多折线图”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。