Android图表库HelloChart绘制多折线图
作者:风云正 发布时间:2021-06-18 05:34:45
标签: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();
}
}
来源:https://blog.csdn.net/chenzheng8975/article/details/78143604


猜你喜欢
- HashMap 概述HashMap 是通过 put(key,value) 存储,get(key)来获取。当传入 key 时,HashMap
- 本文实例为大家分享了Java Web实现简易图书管理系统的具体代码,供大家参考,具体内容如下前言首先实现的是用户的登录注册,注册成功后自动跳
- 前言Groovy 是一种基于 JVM 的动态语言,与 Java 语言紧密集成,可以很方便地在 Java 项目中使用。Groovy 有着简洁的
- 函数四个方面:函数的定义函数的特点函数的应用函数的重载一、函数的定义及特点1) 什么是函数?函数就是定义在类中的具有特定功能的一段独立小程序
- Hi~大家好,出来创业快3个月了,一切还不错,前一段时间用了业余时间搞了个问答类网站YQMA.想做中国的stackoverflow,哈哈,只
- 在实战中学习Spring,本系列的最终目的是完成一个实现用户注册登录功能的项目。预想的基本流程如下:1、用户网站注册,填写用户名、密码、em
- 一、简介随着 Apple 发布 iPhone X 之后,各大手机厂商也开始模仿这种刘海屏的设计,而且刘海屏手机的用户也是越来越大,前段时间将
- 本文实例为大家分享了Android实现3D层叠式卡片图片展示的具体代码,供大家参考,具体内容如下先看效果好了效果看了,感兴趣的往下看哦!整体
- 一:背景1. 讲故事这几天都在修复bug真的太忙了,期间也遇到了一个挺有趣bug,和大家分享一下,这是一块sql挺复杂的报表相关业务,不知道
- 目录1 Exchanger 介绍2 Exchanger 实例exchange等待超时3 实现原理1 Exchanger 介绍前面分别介绍了C
- 协变协变概念令人费解,多半是取名或者翻译的锅,其实是很容易理解的。比如大街上有一只狗,我说大家快看,这有一只动物!这个非常自然,虽然动物并不
- 前言代码库:https://gitee.com/leo825/springboot-learning-parents.git之前写过《Spr
- 前言在之前的文章我们复习了 ViewGroup 的测量与布局,那么我们这一篇效果就可以在之前的基础上实现一个灵活的九宫格布局。那么一个九宫格
- 1.单文件上传首先创建一个Spring Boot项目,并添加spring-boot-starter-web依赖然后创建一个upload.js
- 前言上文讲的MyBatis部署运行且根据官网运行了一个demo:一步到位部署运行MyBatis3源码<保姆级>jdbc再贴一个J
- 1,背景在开发中总会遇到一个可拖拽的悬浮View,不管是在开发中,还是在线上,都时长有这样的控件,我们通常遇到这种情况,经常需要自己封装,需
- 实现控件拖动的基本原理是对鼠标位置的捕获,同时根据鼠标按键的按下、释放确定控件移动的幅度和时机。 简单示例: 在Grid中有一个Button
- 前言RefreshIndicator是Flutter里常见的下拉刷新组件,使用是比较方便的。但由于产品兄弟对其固定的刷新样式很是不满,而且代
- 寻找到application.yml的读取的操作。从spring.factories 中查看到# Application Listeners
- 1.依赖的jar文件 jsch-0.1.53.jar2.登录方式有密码登录,和密匙登录 代码:主函数:import java.ut