各种曲线折线图的使用

Posted 2020-08-31 oooohuhu

在正在进行的项目中，需要用到折线图来展示数据，于是看大神就使用了github用户现有的源码，我们直接填充数据即可

首先再一看布局文件

1 <lecho.lib.hellocharts.view.LineChartView
2     android:id="@+id/chart_top"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent"
5     android:layout_weight="1"
6     android:paddingRight="10dp"
7     android:background="@color/colorPrimary"
8   />

再是获取数据填充

  1 //初始化 
  2 @ViewInject(R.id.chart_top)
  3     private LineChartView chartTop;
  4 //这是从接口中获取数据   
  5  HttpHelper.post(this, UrlConfig.trendStat, parm, new HttpHelper.Ok() {
  6             @Override
  7             public void success(String str) {
  8                 object=JSON.parseObject(str);
  9                 JSONArray jlistX = object.getJSONArray("xdata");
 10                 JSONArray jlistY=object.getJSONArray("ydata");
 11                 xdata=new String[jlistX.size()];
 12                 ydata=new String[jlistY.size()];
 13                 maxValueY=0;
 14                 for (int i=0;i<jlistX.size();i++){
 15                     String x=jlistX.getString(i);
 16                     String y=jlistY.getString(i);
 17                     int temp=Integer.valueOf(jlistY.getString(i));
 18                     if (temp>maxValueY){
 19                         maxValueY=temp;
 20                     }
 21                     xdata[i]=x;
 22                     ydata[i]=y;
 23                 }
 24                 generateInitialLineData();
 25                 generateColumnData();
 26                 chartTop.setZoomLevel(0,0,(xdata.length/4)+1);
 27                 // Cancel last animation if not finished.
 28                 chartTop.cancelDataAnimation();
 29                 // Start new data animation with 300ms duration;
 30                 chartTop.startDataAnimation(300);
 31             }
 32 
 33             @Override
 34             public void complete(String str) {
 35 
 36             }
 37         });
 38 //数据填充
 39 private void generateInitialLineData() {
 40         int numValues = xdata.length;
 41         if (numValues<7){
 42             numValues=7;
 43         }
 44         List<AxisValue> axisValues = new ArrayList<AxisValue>();
 45         List<PointValue> values = new ArrayList<PointValue>();
 46         for (int i = 0; i < numValues; ++i) {
 47             if (i>=xdata.length){
 48                 axisValues.add(new AxisValue(i).setLabel(""));
 49             }else {
 50                 values.add(new PointValue(i,Float.valueOf(ydata[i])));
 51                 axisValues.add(new AxisValue(i).setLabel(xdata[i]));
 52             }
 53 
 54         }
 55         Line line = new Line(values);
 56         line.setColor(ChartUtils.DEFAULT_Line_COLOR).setCubic(true);
 57         line.setPointColor(ChartUtils.DEFAULT_COLOR);
 58         line.setFilled(true);
 59         line.setHasGradientToTransparent(true);
 60 //        line.setStrokeWidth(1);
 61 //        line.setPathEffect(new DashPathEffect(new float[] { 1, 1, 1, 1}, 0));
 62         List<Line> lines = new ArrayList<Line>();
 63         lines.add(line);
 64 
 65         lineData = new LineChartData(lines);
 66         lineData.setAxisXBottom(new Axis(axisValues).setHasLines(true).setLineColor(ChartUtils.DEFAULT_COLOR_EEE).setTextSize(9));
 67         lineData.setAxisYLeft(new Axis().setHasLines(true).setMaxLabelChars(4).setLineColor(ChartUtils.DEFAULT_COLOR_EEE).setAutoGenerated(false).setValues(getYAxisMax(maxValueY)));
 68 
 69         chartTop.setLineChartData(lineData);
 70 
 71         // For build-up animation you have to disable viewport recalculation.
 72         chartTop.setViewportCalculationEnabled(false);
 73 
 74         // And set initial max viewport and current viewport- remember to set viewports after data.
 75         Viewport v = new Viewport(0,getYAxisMax(maxValueY).get(10).getValue(), numValues-1, 0);
 76         chartTop.setMaximumViewport(v);
 77         chartTop.setCurrentViewport(v);
 78 
 79         chartTop.setZoomType(ZoomType.HORIZONTAL);
 80     }
 81     //根据y坐标最大值 动态调整y轴刻度
 82     private List<AxisValue> getYAxisMax(int num) {
 83         if (num==0){num=1;}
 84         List<AxisValue> list=new ArrayList<>();
 85         String numStr=num+"";
 86         int mi=numStr.length()-1;
 87         float temp_f=num/10;
 88         while (temp_f>1){
 89             temp_f=temp_f/10;
 90         }
 91         if (temp_f==1){
 92             mi=mi-1;
 93         }
 94         for (int i=0;i<11;i++){
 95             AxisValue value1=new AxisValue((float) (i*Math.pow(10,mi)));
 96             list.add(value1);
 97         }
 98         return list;
 99     }
100 
101     private void generateColumnData() {
102 
103         int numSubcolumns = 1;
104         int numColumns = ydata.length;
105 
106         List<AxisValue> axisValues = new ArrayList<AxisValue>();
107         List<Column> columns = new ArrayList<Column>();
108         List<SubcolumnValue> values;
109         for (int i = 0; i < numColumns; ++i) {
110 
111             values = new ArrayList<SubcolumnValue>();
112             for (int j = 0; j < numSubcolumns; ++j) {
113                 values.add(new SubcolumnValue((float) Math.random() * 50f + 5, ChartUtils.pickColor()));
114             }
115 
116             axisValues.add(new AxisValue(i).setLabel(ydata[i]));
117 
118             columns.add(new Column(values).setHasLabelsOnlyForSelected(true));
119         }
120 
121         columnData = new ColumnChartData(columns);
122 
123         columnData.setAxisXBottom(new Axis(axisValues).setHasLines(true));
124         columnData.setAxisYLeft(new Axis().setHasLines(true).setMaxLabelChars(2));
138     }
139     private void generateLineData(int color, float range) {
140         // Cancel last animation if not finished.
141         chartTop.cancelDataAnimation();
142 
143         // Modify data targets
144         Line line = lineData.getLines().get(0);// For this example there is always only one line.
145         line.setColor(color);
146         for (PointValue value : line.getValues()) {
147             // Change target only for Y value.
148             value.setTarget(value.getX(), (float) Math.random() * range);
149         }
150 
151         // Start new data animation with 300ms duration;
152         chartTop.startDataAnimation(300);
153     }

至于LineChartView，从大神哪里直接拿来使用了，详细大家可参照下面的链接

https://github.com/lecho/hellocharts-android中