Android圖表庫HelloChart繪制多折線圖
本文實例為大傢分享瞭Android圖表庫HelloChart繪制多折線圖的具體代碼,供大傢參考,具體內容如下
一、效果圖
二、實現步驟
1.添加依賴庫
compile 'com.github.lecho:hellocharts-android:v1.5.8'
2.佈局文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:id="@+id/include_id" layout="@layout/titlelayout_theme" android:layout_width="match_parent" android:layout_height="wrap_content" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:padding="4dp" android:orientation="horizontal"> <View android:layout_width="6dp" android:layout_height="6dp" android:background="#BF0815" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10sp" android:text="噪音" android:layout_marginLeft="5dp" android:textColor="@color/common_gray3"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:padding="4dp" android:orientation="horizontal"> <View android:layout_width="6dp" android:layout_height="6dp" android:background="#088B05" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10sp" android:text="溫度" android:layout_marginLeft="5dp" android:textColor="@color/common_gray3"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:padding="4dp" android:orientation="horizontal"> <View android:layout_width="6dp" android:layout_height="6dp" android:background="#0862D8" /> <TextView android: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> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:padding="4dp" android:orientation="horizontal"> <View android:layout_width="6dp" android:layout_height="6dp" android:background="#552705" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="10sp" android:text="風速" android:layout_marginLeft="5dp" android:textColor="@color/common_gray3"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:padding="4dp" android:orientation="horizontal"> <View android:layout_width="6dp" android:layout_height="6dp" android:background="#6221D1" /> <TextView android: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.LineChartView android:id="@+id/line_chart" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
3.Activity類
package com.aldx.hccraftsman.activity; import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Typeface; import android.os.Bundle; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import com.aldx.hccraftsman.R; import com.aldx.hccraftsman.application.Application; import com.aldx.hccraftsman.base.BaseActivity; import com.aldx.hccraftsman.entity.DustLineChart; import com.aldx.hccraftsman.entity.DustLineChartModel; import com.aldx.hccraftsman.entity.TempChartData; import com.aldx.hccraftsman.jsonparse.JSONObject; import com.aldx.hccraftsman.jsonparse.ReflectUtil; import com.aldx.hccraftsman.okHttp.LoadingDialogCallback; import com.aldx.hccraftsman.utils.Api; import com.aldx.hccraftsman.utils.Constants; import com.aldx.hccraftsman.utils.LogUtil; import com.aldx.hccraftsman.utils.Utils; import com.lzy.okgo.OkGo; import java.text.ParseException; import java.util.ArrayList; import java.util.Calendar; import java.util.Date; import java.util.List; import butterknife.BindView; import butterknife.ButterKnife; import butterknife.OnClick; import cn.qqtheme.framework.picker.DatePicker; import cn.qqtheme.framework.picker.DateTimePicker; import lecho.lib.hellocharts.gesture.ZoomType; import lecho.lib.hellocharts.model.Axis; import lecho.lib.hellocharts.model.AxisValue; import lecho.lib.hellocharts.model.Line; import lecho.lib.hellocharts.model.LineChartData; import lecho.lib.hellocharts.model.PointValue; import lecho.lib.hellocharts.model.ValueShape; import lecho.lib.hellocharts.model.Viewport; import lecho.lib.hellocharts.view.LineChartView; import okhttp3.Call; import okhttp3.Response; /** * author: chenzheng * created on: 2017/9/29 10:18 * description: */ public class DustLineChartActivity extends BaseActivity { @BindView(R.id.line_chart) LineChartView lineChart; @BindView(R.id.back_iv) ImageView backIv; @BindView(R.id.layout_back) LinearLayout layoutBack; @BindView(R.id.title_tv) TextView titleTv; @BindView(R.id.right_tv) TextView rightTv; @BindView(R.id.layout_right) LinearLayout layoutRight; private String projectId; private List<Integer> colors = new ArrayList<>(); private List<TempChartData> listTemp = new ArrayList<TempChartData>();//數據 private List<AxisValue> mAxisXValues = new ArrayList<AxisValue>(); //x軸方向的坐標數據 private List<AxisValue> mAxisYValues = new ArrayList<AxisValue>(); //y軸方向的坐標數據 private List<Float> distanceList = new ArrayList<Float>(); private boolean hasAxes = true; //是否有軸,x和y軸 private boolean hasAxesNames = true; //是否有軸的名字 private boolean hasLines = true; //是否有線(點和點連接的線,選擇false隻會出現點) private boolean hasPoints = true; //是否有點(每個值的點) private ValueShape shape = ValueShape.CIRCLE; //點顯示的形式,圓形,正方向,菱形 private boolean isFilled = false; //是否是填充 private boolean hasLabels = true; //每個點是否有名字 private boolean isCubic = false; //是否是立方的,線條是直線還是弧線 private boolean hasLabelForSelected = false; //每個點是否可以選擇(點擊效果) private LineChartData data; // 折線圖封裝的數據類 @Override protected void onCreate(Bundle savedInstanceState) { 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(); } private void initData() { //顏色集合 colors.add(0xff0862D8); colors.add(0xff6221D1); colors.add(0xff552705); colors.add(0xff088B05); colors.add(0xffBF0815); } private void initView() { titleTv.setText("揚塵監測折線圖"); Calendar calendar1 = Calendar.getInstance(); String sss = Utils.DATE_SIMPLE_FORMATER.format(calendar1.getTime()); rightTv.setText(sss); layoutRight.setVisibility(View.VISIBLE); } public void doRequest() { OkGo.get(Api.GET_MONITOR_MONTH_BY_PROJECT_ID) .tag(this) .params("projectId", projectId) .params("time", rightTv.getText().toString()) .execute(new LoadingDialogCallback(this, Constants.LOADING_TXT) { @Override public void onSuccess(String s, Call call, Response response) { DustLineChartModel dustLineChartModel = null; try { dustLineChartModel = (DustLineChartModel) ReflectUtil .copy(DustLineChartModel.class, new JSONObject(s)); } catch (Exception e) { 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); } } } @Override public void onError(Call call, Response response, Exception e) { super.onError(call, response, e); Application.showResultToast(DustLineChartActivity.this, call, e); } }); } private void setLineChartData(List<DustLineChart> dlcList) { listTemp.clear(); mAxisXValues.clear(); mAxisYValues.clear(); distanceList.clear(); float yMax = 0; try { int xCount = 0; Calendar curCalendar = Calendar.getInstance(); String curDateStr = Utils.DATE_SIMPLE_FORMATER.format(curCalendar.getTime()); if (rightTv.getText().toString().equals(curDateStr)) { xCount = curCalendar.get(Calendar.DAY_OF_MONTH); } else { Date queryDate = Utils.DATE_FORMATER.parse(rightTv.getText().toString() + "-01"); Calendar queryCalendar = Calendar.getInstance(); queryCalendar.setTime(queryDate); xCount = queryCalendar.getActualMaximum(Calendar.DAY_OF_MONTH); } LogUtil.e("xCount=" + xCount); for (int j = 1; j <= xCount; j++) { boolean isFinded = false; for (DustLineChart dlc : dlcList) { String tempStr = dlc.time; if (!Utils.isEmpty(tempStr)) { Date tempDate = Utils.DATE_FORMATER.parse(tempStr); Calendar tempCalendar = 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(new TempChartData(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(new TempChartData(j + "", 0.0f, 0.0f, 0.0f, 0.0f, 0.0f)); } } //設置x軸坐標 ,顯示的是時間5-1,5-2.。。。 mAxisXValues.clear(); for (int i = 1; i <= xCount; i++) { //mClockNumberLength mAxisXValues.add(new AxisValue(i).setLabel(i + "")); } mAxisYValues.clear(); float temp = (yMax + 10) / 10; for (int k = 0; k < 10; k++) { float ttt = temp * k; float fff = Utils.toFloat(((int)ttt)+""); mAxisYValues.add(new AxisValue(fff).setLabel("" + (int)fff)); } //獲取距離 for (int i = 1; i <= listTemp.size(); i++) { float apart = i;//得到的拒Y軸的距離 distanceList.add(apart); } //存放線條對象的集合 List<Line> lines = new ArrayList<Line>(); lines.clear(); //把數據設置到線條上面去 for (int i = 0; i < 5; ++i) { List<PointValue> values = new ArrayList<PointValue>(); for (int j = 0; j < listTemp.size(); ++j) { //i=0是最高溫度的線,i=1,是最低溫度的線 //PointValue的兩個參數值,一個是距離y軸的長度距離,另一個是距離x軸長度距離 if (i == 0) { values.add(new PointValue(distanceList.get(j), listTemp.get(j).pm2).setLabel("" + listTemp.get(j).pm2)); } else if (i == 1) { values.add(new PointValue(distanceList.get(j), listTemp.get(j).pm10).setLabel("" + listTemp.get(j).pm10)); } else if (i == 2) { values.add(new PointValue(distanceList.get(j), listTemp.get(j).windspeed).setLabel("" + listTemp.get(j).windspeed)); } else if (i == 3) { values.add(new PointValue(distanceList.get(j), listTemp.get(j).temperature).setLabel("" + listTemp.get(j).temperature)); } else if (i == 4) { values.add(new PointValue(distanceList.get(j), listTemp.get(j).noise).setLabel("" + listTemp.get(j).noise)); } } Line line = new Line(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 = new LineChartData(lines); if (hasAxes) { Axis axisX = new Axis(); Axis axisY = new Axis().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);//設置線條可以水平方向收縮 final Viewport v = new Viewport(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 (Exception e) { e.printStackTrace(); } } public static void startActivity(Context context, String projectId) { Intent intent = new Intent(context, DustLineChartActivity.class); intent.putExtra("projectId", projectId); context.startActivity(intent); } @OnClick({R.id.layout_back, R.id.layout_right}) public void onViewClicked(View view) { switch (view.getId()) { case R.id.layout_back: finish(); break; case R.id.layout_right: chooseDate(); break; } } private void chooseDate() { Calendar cal = Calendar.getInstance(); try { cal.setTime(Utils.DATE_FORMATER.parse(rightTv.getText().toString()+"-01")); } catch (ParseException e) { e.printStackTrace(); } Calendar curCal = Calendar.getInstance(); int curMonth = cal.get(Calendar.MONTH) + 1; int curYear = cal.get(Calendar.YEAR); final DatePicker picker = new DatePicker(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(new DatePicker.OnYearMonthPickListener() { @Override public void onDatePicked(String year, String month) { rightTv.setText(year + "-" + month); doRequest(); } }); picker.show(); } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Android studio實現簡易的計算器功能
- Android移動應用開發指南之六種佈局詳解
- Android生成隨機數的方法實例
- Android實現日期時間選擇對話框
- Android使用DatePickerDialog顯示時間