各种曲线、折线图的使用

在正在进行的项目中,需要用到折线图来展示数据,于是看大神就使用了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中

				
时间: 2024-10-13 19:48:11

各种曲线、折线图的使用的相关文章

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

iOS 中各种折线.曲线.图形绘制方法集锦(折线图.走势图.柱状图.动态曲线图.形状图.划线图)

前言 具体实现如下: 目录 前言 第一 折线图实现 .1) 自定义视图实现 .2)关键技术实现 .3) 方法调用 .4) 效果展示 第二 走势曲线图实现 .1) 导入DJChart第三方库 .2)横竖轴参数设置 .3) 方法调用 .4) 效果展示 第三 画线图实现 .1) 导入ZXQuartz第三方库 .2) 自定义视图,画各种图形 .3) 方法调用 .4) 效果展示 第四 柱状图实现 .1) 导入ZXQuartz第三方库 .2)横竖轴参数设置 .3) 方法调用 .4) 效果展示 第五 各式图形

自定义view—折线图

学习导航 第一节:http://blog.csdn.net/bobo8945510/article/details/53197727 -自定义View-自定义属性及引用 第二节:http://blog.csdn.net/bobo8945510/article/details/53203233 自定义view02-图形绘制 第三节:http://blog.csdn.net/bobo8945510/article/details/53213938 自定义View-绘图基础之Path 第四节:http

手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍

因为项目需要搞一个折线图,按照日期显示相应的成绩,所以有了本文. 以前用过一次XCL-chart,但是感觉只适合固定图表,不去滑动的那种,因为你一滑动太卡了你懂得(毕竟作者好久没更新优化了),拙言大神我开玩笑的 ,毕竟我加你的群大半年了 - - 第二研究了一下achartenginee图表框架,一不美观,二 achartenginee的可定制性实在不敢恭维,做出来的图表根本不能满足需求 再试了一次网传最好用的MPchart和hellochart同一年出来的,但是要比hellochaet早点.说实

MindFusion--LineChart(折线图)

最近在统计一些信息,需要用一些折线图来体现以下,于是就学习了一下Mindfusion的这个第三方的空间,感觉效果还是不错的,这里就先简单的介绍一下他们的基本属性的用法吧. 因为我需要展示这些数据近些年来的走势的情况,所以用的是MindFusion的LineChart控件,但是倒是不难,找了几个简单的例子,把几个属性熟悉了一些,这里大概分为界面样式,数据源设置着两部分吧. 如果需要可以去这里边下载MindFusion:点击打开链接 界面样式 对于界面的样式,大概也就是搞清楚我们需要显示几部分数据,

ASP.NET实现折线图的绘制

用到.Net中绘图类,实现折线图的绘制,生成图片,在页面的显示,代码如下: 1 /// <summary> 2 /// 获取数据 3 /// strChartName:图名称: 4 /// yName:纵坐标名称: 5 /// xName:横坐标名称: 6 /// iyMaxValue:纵坐标最大值: 7 /// dyAveValue:纵坐标单位值=(纵坐标最大值/标量30) 8 /// ----100 30 :3 9 /// ----200 30 :1.5: 10 /// xdbColumn

highcharts实例教程一:结合php与mysql生成折线图

Highcharts是一款纯javascript和html5编写的图表库,不仅几乎能兼容所有pc浏览器,而且对ios和android手机端的兼容 性也不错,它能够很简单便捷的在Web网站或Web应用中添加交互性的图表,Highcharts目前支持直线图.折线图.面积图.柱状图.饼图.散点图 等多达28种不同类型的图表,还支持3D立体图表的生成,可以满足你对Web图表的任何需求 !而且Highcharts对学习者.非商业机构是免费使用的. 案例场景:要求针对技术cto网站,直观地显示一周网站pv.

achartengine画出动态折线图

achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目时间上也不允许,虽然这个画图引擎比较简单,不过勉强够用了. 下一步问题就来了,我仓促上手,只会画静态图,就是事先定义好几个坐标,然后activity载入的时候折线就已经画好了,可是我的项目要求我每隔一秒种都要把新搜集到的数据添加到图表中去,类似于windows中那个任务管理器里的性能统计图,网上搜来

swift:打造你自己的折线图

看到苹果Health里的折线图了吗.我们就是要打造一个这样的折线图.没看过的请看下图. 我们的主题在于折线图本身.其他的包括步数.日平均值等描述类的内容这里就不涉及了. 首先观察,这个图种包含些什么组成部分.线?这个太明显都看见了.还有每个节点的小圆圈,还有折线图里从上到下的渐变.这里是白色的从上到下逐渐透明的效果.还有一条虚线.这个暂时先不考虑了.你能绘制出来最下面的x轴标尺,绘制个虚线还不是小菜? 为什么说是绘制呢,因为显然我们不想用一个UIView把像素设置为1,背景色设置为UIColor