Android實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)與堆疊折線圖詳解流程
更新時(shí)間：2021年10月29日 16:28:01 作者：FranzLiszt1847
堆疊折線圖是折線圖的一種，堆積折線圖用于顯示每一數(shù)值所占大小隨時(shí)間或有序類別而變化的趨勢(shì)，可能顯示數(shù)據(jù)點(diǎn)以表示單個(gè)數(shù)據(jù)值，也可能不顯示這些數(shù)據(jù)點(diǎn)。堆疊折線圖中，類別數(shù)據(jù)沿水平軸均勻分布，所有值數(shù)據(jù)沿垂直軸均勻分布
效果視頻
引用
描述
本示例采用的是非常、非常、非常好用的一款第三方SDK——helloCharts
傳送門
導(dǎo)包
第一步 ：導(dǎo)入maven
maven { url 'https://jitpack.io' }
第二步：導(dǎo)入依賴
implementation 'com.github.lecho:hellocharts-library:1.5.8@aar'
代碼分析
本示例總共采用了三條折線，分別為溫度、濕度、光照
初始化
初始化三條折線顏色
TmpLine = new Line( mTmpChart ).setColor( Color.parseColor( "#cc00ff" ) ); HumLine= new Line( mHumChart ).setColor( Color.parseColor( "#0033ff" ) ); LightLine = new Line( mLightChart ).setColor( Color.parseColor( "#cc0000" ) );
初始化三條折線樣式
TmpLine.setShape( ValueShape.SQUARE);
TmpLine.setCubic(true);//曲線是否平滑，即是曲線還是折線
TmpLine.setFilled(true);//是否填充曲線的面積
TmpLine.setHasLabels(true);//曲線的數(shù)據(jù)坐標(biāo)是否加上備注
TmpLine.setHasLines(true);//是否用線顯示。如果為false 則沒有曲線只有點(diǎn)顯示
TmpLine.setHasPoints(true);//是否顯示圓點(diǎn) 如果為false 則沒有原點(diǎn)只有點(diǎn)顯示（每個(gè)數(shù)據(jù)點(diǎn)都是個(gè)大的圓點(diǎn)）
HumLine.setShape( ValueShape.CIRCLE);//折線圖上每個(gè)數(shù)據(jù)點(diǎn)的形狀 這里是圓形 （有三種 ：ValueShape.SQUARE ValueShape.CIRCLE ValueShape.DIAMOND）
HumLine.setCubic(true);//曲線是否平滑，即是曲線還是折線
HumLine.setFilled(true);//是否填充曲線的面積
HumLine.setHasLabels(true);//曲線的數(shù)據(jù)坐標(biāo)是否加上備注
HumLine.setHasLines(true);//是否用線顯示。如果為false 則沒有曲線只有點(diǎn)顯示
HumLine.setHasPoints(true);//是否顯示圓點(diǎn) 如果為false 則沒有原點(diǎn)只有點(diǎn)顯示（每個(gè)數(shù)據(jù)點(diǎn)都是個(gè)大的圓點(diǎn)）
LightLine.setShape( ValueShape.DIAMOND);//折線圖上每個(gè)數(shù)據(jù)點(diǎn)的形狀 這里是圓形 （有三種 ：ValueShape.SQUARE ValueShape.CIRCLE ValueShape.DIAMOND）
LightLine.setCubic(true);//曲線是否平滑，即是曲線還是折線
LightLine.setFilled(true);//是否填充曲線的面積
LightLine.setHasLabels(true);//曲線的數(shù)據(jù)坐標(biāo)是否加上備注
LightLine.setHasLines(true);//是否用線顯示。如果為false 則沒有曲線只有點(diǎn)顯示
LightLine.setHasPoints(true);//是否顯示圓點(diǎn) 如果為false 則沒有原點(diǎn)只有點(diǎn)顯示（每個(gè)數(shù)據(jù)點(diǎn)都是個(gè)大的圓點(diǎn)）
將三條折線添加到折線集合內(nèi)
lines.add( TmpLine );
lines.add( HumLine );
lines.add( LightLine );
添加折線
data = new LineChartData();
data.setLines(lines);
初始化X軸、Y軸樣式屬性
Axis axisX = new Axis(); //X軸
axisX.setHasTiltedLabels(false); //X坐標(biāo)軸字體是斜的顯示還是直的，true是斜的顯示
axisX.setTextColor(Color.RED); //設(shè)置字體顏色
//axisX.setName("時(shí)間"); //表格名稱
axisX.setTextSize(7);//設(shè)置字體大小
axisX.setMaxLabelChars(10); //最多幾個(gè)X軸坐標(biāo)，意思就是你的縮放讓X軸上數(shù)據(jù)的個(gè)數(shù)7<=x<=mAxisXValues.length
axisX.setValues(mAxisXValues); //填充X軸的坐標(biāo)名稱
data.setAxisXBottom(axisX); //x 軸在底部
//data.setAxisXTop(axisX); //x 軸在頂部
axisX.setHasLines(true); //x 軸分割線
// Y軸是根據(jù)數(shù)據(jù)的大小自動(dòng)設(shè)置Y軸上限(在下面我會(huì)給出固定Y軸數(shù)據(jù)個(gè)數(shù)的解決方案)
Axis axisY = new Axis(); //Y軸
axisY.setName("歷史數(shù)據(jù)");//y軸標(biāo)注
axisY.setTextSize(10);//設(shè)置字體大小
axisY.setTextColor( Color.RED );
axisX.setLineColor( Color.GREEN );
data.setAxisYLeft(axisY); //Y軸設(shè)置在左邊
設(shè)置折線圖支持滑動(dòng)、縮放、平移等功能
lineChart.setInteractive(true);
lineChart.setZoomType( ZoomType.HORIZONTAL);
lineChart.setMaxZoom((float) 2);//最大方法比例
lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
lineChart.setLineChartData(data);
lineChart.setVisibility( View.VISIBLE);
Viewport v = new Viewport(lineChart.getMaximumViewport());
v.left = 0;
v.right = 7;
lineChart.setCurrentViewport(v);
動(dòng)態(tài)添加數(shù)據(jù)
采用Timer動(dòng)態(tài)添加數(shù)據(jù)
private void getValue(){
timer = new Timer( );
timer.schedule( new TimerTask() {
@Override
public void run() {
runOnUiThread( ()->{
getTmp();
getHum();
getLight();
} );
}
} ,100,2000);
}
溫度數(shù)據(jù)
從云獲取數(shù)據(jù)
float tmp = Float.parseFloat( pointDTO.get( i ).Value );
刷新數(shù)據(jù)，(很重要)
lineChart.setLineChartData(data);
private void getTmp(){
business.getSensorData( Param.DEVICEID, Param.TMPTAG, "1", "1", null, null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
@Override
protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {
}
@Override
public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
super.onResponse( call, response );
BaseResponseEntity<SensorDataPageDTO> dto = response.body();
if (dto != null && dto.getStatus() == 0){
List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
if (pointDTO != null){
for (int i = 0; i <pointDTO.size() ; i++) {
float tmp = Float.parseFloat( pointDTO.get( i ).Value );
//Toast.makeText( context,tmp+"",Toast.LENGTH_SHORT ).show();
mTmpChart.add( new PointValue( i,tmp ) );
lineChart.setLineChartData(data);
}
}else {
Toast.makeText( context,"數(shù)據(jù)為空",Toast.LENGTH_SHORT ).show();
}
}
}
} );
}
濕度數(shù)據(jù)
business.getSensorData( Param.DEVICEID, Param.HUMTAG, "1", "1", null, null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
@Override
protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {
}
@Override
public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
super.onResponse( call, response );
BaseResponseEntity<SensorDataPageDTO> dto = response.body();
if (dto != null && dto.getStatus() == 0){
List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
if (pointDTO != null){
for (int i = 0; i <pointDTO.size() ; i++) {
float hum = Float.parseFloat( pointDTO.get( i ).Value );
//Toast.makeText( context,tmp+"",Toast.LENGTH_SHORT ).show();
mHumChart.add( new PointValue( i,hum ) );
lineChart.setLineChartData(data);
}
}else {
Toast.makeText( context,"數(shù)據(jù)為空",Toast.LENGTH_SHORT ).show();
}
}
}
} );
}
光照數(shù)據(jù)
private void getLight(){
business.getSensorData( Param.DEVICEID, Param.LIGHTTAG, "1", "1", null, null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
@Override
protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {
}
@Override
public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
super.onResponse( call, response );
BaseResponseEntity<SensorDataPageDTO> dto = response.body();
if (dto != null && dto.getStatus() == 0){
List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
if (pointDTO != null){
for (int i = 0; i <pointDTO.size() ; i++) {
float light = Float.parseFloat( pointDTO.get( i ).Value );
//Toast.makeText( context,tmp+"",Toast.LENGTH_SHORT ).show();
mLightChart.add( new PointValue( i,light ) );
lineChart.setLineChartData(data);
}
}else {
Toast.makeText( context,"數(shù)據(jù)為空",Toast.LENGTH_SHORT ).show();
}
}
}
} );
}
動(dòng)態(tài)添加X軸時(shí)間值
初始化
X軸自動(dòng)刷新時(shí)間依舊采用Timer實(shí)現(xiàn)
這倆屬性較為重要
axisX.setTextSize(7);//設(shè)置字體大小
axisX.setMaxLabelChars(10); //最多幾個(gè)X軸坐標(biāo)，意思就是你的縮放讓X軸上數(shù)據(jù)的
X軸屬性初始化
Axis axisX = new Axis(); //X軸
axisX.setHasTiltedLabels(false); //X坐標(biāo)軸字體是斜的顯示還是直的，true是斜的顯示
axisX.setTextColor(Color.RED); //設(shè)置字體顏色
//axisX.setName("時(shí)間"); //表格名稱
axisX.setTextSize(7);//設(shè)置字體大小
axisX.setMaxLabelChars(10); //最多幾個(gè)X軸坐標(biāo)，意思就是你的縮放讓X軸上數(shù)據(jù)的個(gè)數(shù)7<=x<=mAxisXValues.length
axisX.setValues(mAxisXValues); //填充X軸的坐標(biāo)名稱
data.setAxisXBottom(axisX); //x 軸在底部
//data.setAxisXTop(axisX); //x 軸在頂部
axisX.setHasLines(true); //x 軸分割線
自動(dòng)刷新時(shí)間實(shí)現(xiàn)
private void getAxis() {
timerY = new Timer( );
timerY.schedule( new TimerTask() {
@Override
public void run() {
test();
}
},100,2000 );
}
private void test(){
business.getSensorData( Param.DEVICEID, Param.TMPTAG, "1", "1", null,null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
@Override
protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {
}
@Override
public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
super.onResponse( call, response );
BaseResponseEntity<SensorDataPageDTO> dto = response.body();
if (dto != null && dto.getStatus() == 0){
List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
SensorDataPageDTO.VR[] array = new SensorDataPageDTO.VR[pointDTO.size()];
pointDTO.toArray(array);
mAxisXValues.clear();
mTime = new String[array.length];
for (int i = 0; i < array.length ; i++) {
//mAxisXValues.clear();
mTime[i] = pointDTO.get( i ).RecordTime;
mAxisXValues.add(new AxisValue(i).setLabel(mTime[i]));
}
runOnUiThread( ()->{
lineChart.setLineChartData(data);
} );
}
}
} );
}
尾言
如有不足之處，望君海涵
需要源碼，call我
到此這篇關(guān)于Android實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)與堆疊折線圖詳解流程的文章就介紹到這了,更多相關(guān)Android 動(dòng)態(tài)添加數(shù)據(jù) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
輕松實(shí)現(xiàn)可擴(kuò)展自定義的Android滾輪時(shí)間選擇控件
這篇文章主要為大家詳細(xì)介紹了可擴(kuò)展自定義的Android滾輪時(shí)間選擇控件，結(jié)合WheelView實(shí)現(xiàn)滾輪選擇日期操作，感興趣的小伙伴們可以參考一下2016-07-07
Android ViewPager中顯示圖片與播放視頻的填坑記錄
這篇文章主要給介紹了關(guān)于Android ViewPager中顯示圖片與播放視頻的一些填坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-05-05
Android popupWindow彈出窗體實(shí)現(xiàn)方法分析
這篇文章主要介紹了Android popupWindow彈出窗體實(shí)現(xiàn)方法,結(jié)合具體實(shí)例形式分析了Android彈出窗體的布局及popupwindow屬性設(shè)置、事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
Android ksoap調(diào)用webservice批量上傳多張圖片詳解
這篇文章主要介紹了Android ksoap調(diào)用webservice批量上傳多張圖片詳解的相關(guān)資料,需要的朋友可以參考下2017-02-02
使用Retrofit下載文件并實(shí)現(xiàn)進(jìn)度監(jiān)聽的示例
這篇文章主要介紹了使用Retrofit下載文件并實(shí)現(xiàn)進(jìn)度監(jiān)聽的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Android ListView 子控件onClick正確獲取position的方法
這篇文章主要介紹了Android ListView 子控件onClick正確獲取position的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-01-01
Android利用ViewPager實(shí)現(xiàn)滑動(dòng)廣告板實(shí)例源碼
利用ViewPager我們可以做很多事情，從最簡(jiǎn)單的導(dǎo)航，到頁面切換菜單等等。ViewPager的功能就是可以使視圖滑動(dòng)，就像Lanucher左右滑動(dòng)那樣2013-06-06
Android仿微信公眾號(hào)文章頁面加載進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Android仿微信公眾號(hào)文章頁面加載進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
Android實(shí)現(xiàn)狀態(tài)欄白底黑字效果示例代碼
這篇文章主要介紹了Android實(shí)現(xiàn)狀態(tài)欄白底黑字效果的相關(guān)資料，實(shí)現(xiàn)后的效果非常適合日常開發(fā)中使用，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
Android開發(fā)中使用Volley庫發(fā)送HTTP請(qǐng)求的實(shí)例教程
這篇文章主要介紹了Android開發(fā)中使用Volley庫發(fā)送HTTP請(qǐng)求的實(shí)例教程,包括創(chuàng)建Volley單例的基本知識(shí)與取消Request請(qǐng)求的技巧等,需要的朋友可以參考下2016-05-05