hellocharts之linechart最详细介绍（写了好久）

最新推荐文章于 2024-04-26 13:21:31 发布

来自星星的谢广坤

最新推荐文章于 2024-04-26 13:21:31 发布

阅读量1.5w

点赞数 4

分类专栏： hellocharts 文章标签： android 折线 hellocharts

本文链接：https://blog.csdn.net/qq_35563053/article/details/65628813

版权

hellocharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近有个新项目做的是空气温度，空气湿度的曲线图。

研究了很久，最终选择了框架hellocharts，外国哥们写的。

但是api注释不多，所以做起来有点费劲。一边翻译，一边写代码。

项目demo下载地址：点击下载

功夫不负有心人。总算是实现了所有的功能；

第一步：导包

下载地址：http://download.csdn.net/detail/qq_35563053/9792257

复制到libs文件夹中，右键选择add as library ，然后选择app ,点击ok

第二步：同步完就可以直接使用了

package com.axin;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.graphics.Color;
import android.view.View;
import android.widget.Button;
import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.animation.ChartAnimationListener;
import lecho.lib.hellocharts.formatter.LineChartValueFormatter;
import lecho.lib.hellocharts.formatter.SimpleLineChartValueFormatter;
import lecho.lib.hellocharts.gesture.ContainerScrollType;
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;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private LineChartView chartView;
    private Button but_1;
    private Button but_2;

    //    折线集合（add多个line就会显示对条线）
    List
   
   
    
     chartlines = new ArrayList
    
    
     
     ();
    //    横坐标集合，可以设置标注名称，就是x轴的值集合，可以是0-100，也可以是10000-20000
    List
     
     
      
       mAxisXValues = new ArrayList
      
      
       
       ();
    //    点的集合，顾名思义一个point，就有他所对应的x y值，假如有个点的值是（5,100）x=5 y=100
    List
       
       
         pointValues = new ArrayList 
        
          (); // 折线，多条折线可以new多个线，要显示谁，就在line集合里add谁 Line chartline = new Line(); // 线上的数据，鸡肋但必须得用 LineChartData lineChartData = new LineChartData(); // 定义格式，小数点等等信息 LineChartValueFormatter chartValueFormatter = new SimpleLineChartValueFormatter(2); // X轴、Y轴 Axis axisX = new Axis(); Axis axisY = new Axis(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); chartView=(LineChartView)findViewById(R.id.chartView); but_1=(Button)findViewById(R.id.but_1); but_2=(Button)findViewById(R.id.but_2); but_1.setOnClickListener(this); but_2.setOnClickListener(this); } public void setKLine(int type,List 
         
           list){ // 清空数据，将不影响下一次点击按钮 传过来一个新的list的显示 chartlines.clear(); mAxisXValues.clear(); pointValues.clear(); /* * 这个循环是循环为x轴（x底端轴线）增加值应该只能是float类型的，当然int可以 */ for(DateForLine date:list){ // 第一进来的值假如是“201703041230”，处理完之后应该是4*24+12 String time=date.getTime(); AxisValue axisValue=new AxisValue(parseHour2Ten(time)); // 这句话就关键了，你可以随意设置这个位置显示的东西，string类型的随意来 // 我这边想设置，几月几日几时 axisValue.setLabel(subTimeDay(time)+"日"+subTimeHour(time)+"时"); mAxisXValues.add(axisValue); } // x轴完事了，该布点了 for(DateForLine date:list){ // 第一点的坐标假如是（4*24+12，25.5） 那么pointValue的参数就应该是这个 String time=date.getTime(); PointValue pointValue=new PointValue(parseHour2Ten(time),Float.parseFloat(date.getValue())); // 这个点的标注信息，String的随便来 if(type==1){ pointValue.setLabel(date.getValue()+"℃"); // 温度显示小数 chartline.setFormatter(chartValueFormatter); }else if(type==2){ pointValue.setLabel(date.getValue()+"%PH"); // 温度显示整数就不用设置Formatter了 } // 把这个点添加到集合里去,等会显示用 pointValues.add(pointValue); } // 把点的集合放在线上，显示多条线 就用不同的line分别添加不同的values chartline.setValues(pointValues); // 线的颜色 chartline.setColor(Color.BLUE); // 点的颜色 chartline.setPointColor(Color.BLUE); // 形状，ValueShape提供了几个 chartline.setShape(ValueShape.CIRCLE); // 线的透明度 // chartline.setAreaTransparency(0); // 点的大小 chartline.setPointRadius(2); // 点上的标注信息，刚才 pointValues里面每个点的标注 chartline.setCubic(true); // 阴影面积 chartline.setFilled(false); // 是否用线显示。如果为false 则没有曲线只有点显示 chartline.setHasLines(true); // 是否用点显示。如果为false 则没有点 chartline.setHasPoints(true); // 点的标注是否显示 chartline.setHasLabels(true); // 线的粗细 chartline.setStrokeWidth(2); // 显示几条线，就可以分别设置每一条线，然后add进来 chartlines.add(chartline); // 线的集合放在chart数据中， lineChartData.setLines(chartlines); /* x轴上面的值，就是刚才mAxisXValues的值 5个参数分别是： 1-例如4*24+12 显示为4日12时 2-是否有x轴网格线 3-x轴信息标注颜色是黑色 4-x轴网格线白色 5-x轴信息标注字体12 6-x轴的大名 Y轴也是这么设置，当你想点击不同的按钮，显示不同的信息时可用type进行处理 */ axisX.setValues(mAxisXValues).setHasLines(true).setTextColor(Color.BLACK).setLineColor(Color.WHITE).setTextSize(12).setName("时间");; axisY.setHasLines(true).setTextColor(Color.BLACK).setLineColor(Color.WHITE); if(type==1){ axisY.setName("温度"); }else if(type==2){ axisY.setName("湿度"); } // X轴上的标注数量,点少的时候可以这么用，点多的时候，就不建议这么用了 // axisX.setMaxLabelChars(8); // x 轴在底部 lineChartData.setAxisXBottom(axisX); // x 轴在顶部 // lineChartData.setAxisXTop(axisX); // y 轴在左，也可以右边 lineChartData.setAxisYLeft(axisY); // 这两句话设置折线上点的背景颜色，默认是有一个小方块，而且背景色和点的颜色一样 // 如果想要原来的效果可以不用这两句话，我的显示的是透明的 lineChartData.setValueLabelBackgroundColor(Color.TRANSPARENT); lineChartData.setValueLabelBackgroundEnabled(false); // 把数据放在chart里，设置完这句话其实就可以显示了 chartView.setLineChartData(lineChartData); // 设置行为属性，支持缩放、滑动以及平移，设置他就可以自己设置动作了 chartView.setInteractive(true); // 可放大 chartView.setZoomEnabled(true); // 我这边设置横向滚动 chartView.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL); // 设置可视化视图样式，这里能做的东西非常多， final Viewport v = new Viewport(chartView.getMaximumViewport()); // 我设置两种。点击不同按钮时，y轴固定最大值最小值不一样 // 这里可以固定x轴，让y轴变化，也可以x轴y轴都固定，也就是固定显示在你设定的区间里的点point（x，y） if(type==1){ v.top=50; v.bottom=-50; }else if(type==2){ v.top=100; v.bottom=0; } // 这句话非常关键，上面两种设置，来确定最大可视化样式 // 我们可以理解为，所有点放在linechart时，整个视图全看到时候的样子，也就是点很多很多，距离很紧密 chartView.setMaximumViewport(v); // 接着我们要设置，我们打开这个页面时显示的样子 // 如果你想所有，这两句话就不用了 // 但是我只显示5个点以内 刚才插入的点应该是...（4*24+8，-15.5）（4*24+9，-15.5）（4*24+10，-3.5）（4*24+11，20.0）（4*24+12，8.5） // x轴最右边就应该是x=4*24+12 的点 最左边就应该是x=4*24+8的点 // 当然这个非常灵活，也可以固定显示y轴 最小多少，最大多少 v.left=parseHour2Ten(list.get(list.size()-5).getTime()); v.right =parseHour2Ten(list.get(list.size()-1).getTime()); // 确定上两句话的设置 chartView.setCurrentViewport(v); // 还可以设置当前的动画效果，有兴趣的同学可以试一试 // chartView.setViewportAnimationListener(new ChartAnimationListener() { // @Override // public void onAnimationStarted() { // } // @Override // public void onAnimationFinished() { // chartView.setMaximumViewport(v); // chartView.setViewportAnimationListener(null); // // } // }); // chartView.setCurrentViewport(v); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.but_1: List 
          
            list1=new ArrayList<>(); list1.add(new DateForLine("201703040130","20.8")); list1.add(new DateForLine("201703040230","3.5")); list1.add(new DateForLine("201703040330","10.6")); list1.add(new DateForLine("201703040430","-20")); list1.add(new DateForLine("201703040530","-6")); list1.add(new DateForLine("201703040630","5.5")); list1.add(new DateForLine("201703040730","-10.5")); list1.add(new DateForLine("201703040830","-8.7")); list1.add(new DateForLine("201703040930","5.8")); list1.add(new DateForLine("201703041030","20")); list1.add(new DateForLine("201703041130","17")); list1.add(new DateForLine("201703041230","25.5")); setKLine(1,list1); break; case R.id.but_2: List 
           
             list2=new ArrayList<>(); list2.add(new DateForLine("201703040130","70")); list2.add(new DateForLine("201703040230","51")); list2.add(new DateForLine("201703040330","23")); list2.add(new DateForLine("201703040430","42")); list2.add(new DateForLine("201703040530","19")); list2.add(new DateForLine("201703040630","5")); list2.add(new DateForLine("201703040730","63")); list2.add(new DateForLine("201703040830","77")); list2.add(new DateForLine("201703040930","42")); list2.add(new DateForLine("201703041030","20")); list2.add(new DateForLine("201703041130","11")); list2.add(new DateForLine("201703041230","44")); setKLine(2,list2); break; } } // 把我得到的时间格式处理成小时 public String subTimeMonth(String time){ return time.substring(4,6); } public String subTimeDay(String time){ return time.substring(6,8); } public String subTimeHour(String time){ return time.substring(8,10); } /* *假如回来的时间是"201703151955" 2017年3月19日19:55 * 按照我的需求只要24小时内的值 * 在x轴上这个时间的值应该是15*24+19 */ public int parseHour2Ten(String time){ return Integer.parseInt(time.substring(6,8))*24+ Integer.parseInt(time.substring(8,10)); } }

package com.axin;

/**
 * Created by Axin on 2017/3/23.
 */

public class DateForLine {
    private String time;
    private String value;

    public DateForLine(String time, String value) {
        this.time = time;
        this.value = value;
    }

    public DateForLine() {
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}

最后实现的效果