achartengine之折线图-阿里云开发者社区

问题在文章的最后，大致说来就是折线图，如果点的个数大于3个的时候，不是所有的点都显示对应的值的，这是为什么呢，本来以为是小问题，但两天了还没找到原因）

将前两天的折线图代码做了小量修改，形成一个类似于这样的功能（类似web页面的含有查询条件以及数据列表的功能）：

页面布局：

页面A，页面B：页面A中只有一个按钮，B中有输入框和提交按钮，输入框用来输入数据。

业务流程：

1.点击A中的按钮，进入B中，此时B中没有输入数据，所以B中默认显示设置好的一个折线图，

2.在B的输入框中输入一系列以“逗号”分隔的数字，点击“确定”按钮，折线图刷新。

两个activity以及两个layout，代码如下：

[java]view plaincopy 
   
 package com.test.testlinechar;   
    
 import android.app.Activity;   
 import android.content.Intent;   
 import android.os.Bundle;   
 import android.os.Handler;   
 import android.view.Menu;   
 import android.view.View;   
 import android.view.View.OnClickListener;   
 import android.widget.Button;   
    
 public class HandlerActivity extends Activity {   
     private Button start;   
     private Button endButton;   
     private Button lineButton;   
     Handler handler = new Handler();   
     Runnable updateHandler = new Runnable() {   
            
         @Override   
         public void run() {   
             System.out.println("updateHandler");   
             handler.postDelayed(updateHandler, 3000);   
                
         }   
     };   
    
     @Override   
     protected void onCreate(Bundle savedInstanceState) {   
         // TODO Auto-generated method stub   
         super.onCreate(savedInstanceState);   
         setContentView(R.layout.activity_handler);   
         start = (Button) findViewById(R.id.start);   
         endButton = (Button) findViewById(R.id.end);   
         start.setOnClickListener(new StartClickLintener());   
         endButton.setOnClickListener(new EndClickLintener());   
         lineButton = (Button) findViewById(R.id.line);   
         lineButton.setOnClickListener(new LineClickLintener());   
     }   
    
     @Override   
     public boolean onCreateOptionsMenu(Menu menu) {   
         // TODO Auto-generated method stub   
         return super.onCreateOptionsMenu(menu);   
     }   
     class LineClickLintener implements OnClickListener{   
            
         @Override   
         public void onClick(View v) {   
             Intent intent = new Intent();   
             intent.setClass(HandlerActivity.this, Activity_01.class);   
             startActivity(intent);   
                
         }   
            
     }   
        
 }   

以上和“折线图”相关的实际上只需要关注一个按钮“lineButton”

以下为布局文件：

[html]view plaincopy 
   
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
     xmlns:tools="http://schemas.android.com/tools"   
     android:layout_width="match_parent"   
     android:layout_height="match_parent"   
     android:paddingBottom="@dimen/activity_vertical_margin"   
     android:paddingLeft="@dimen/activity_horizontal_margin"   
     android:paddingRight="@dimen/activity_horizontal_margin"   
     android:paddingTop="@dimen/activity_vertical_margin"   
     tools:context="com.test.testlinechar.HandlerActivity" >   
    
    
     <Button    
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:id="@+id/start"   
         android:text="@string/start"   
         />   
     <Button    
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:id="@+id/end"   
         android:text="@string/end"   
         android:layout_alignRight="@id/start"   
         android:layout_alignParentRight="true"   
         />   
     <Button    
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:layout_below="@id/end"   
         android:id="@+id/line"   
         android:text="@string/line"   
         />   
 </RelativeLayout>   

B页面代码如下：

[java]view plaincopy 
   
 package com.test.testlinechar;   
    
 import java.lang.reflect.Type;   
    
 import org.achartengine.ChartFactory;   
 import org.achartengine.GraphicalView;   
 import org.achartengine.chart.PieChart;   
 import org.achartengine.chart.PointStyle;   
 import org.achartengine.model.CategorySeries;   
 import org.achartengine.model.XYMultipleSeriesDataset;   
 import org.achartengine.model.XYSeries;   
 import org.achartengine.renderer.DefaultRenderer;   
 import org.achartengine.renderer.SimpleSeriesRenderer;   
 import org.achartengine.renderer.XYMultipleSeriesRenderer;   
 import org.achartengine.renderer.XYSeriesRenderer;   
    
 import android.os.Bundle;   
 import android.R.integer;   
 import android.app.Activity;   
 import android.content.Intent;   
 import android.graphics.Color;   
 import android.graphics.Paint.Align;   
 import android.view.Menu;   
 import android.view.View;   
 import android.view.View.OnClickListener;   
 import android.widget.Button;   
 import android.widget.EditText;   
 import android.widget.LinearLayout;   
    
 public class Activity_01 extends Activity {   
     private Button submit;   
     private Button reset;   
     private EditText editText;   
     private  GraphicalView  Gview;   
     @Override   
     protected void onCreate(Bundle savedInstanceState) {   
         super.onCreate(savedInstanceState);   
         setContentView(R.layout.activity_activity_01);   
         submit = (Button) findViewById(R.id.submit);   
         submit.setOnClickListener(new SumbitClickListener());   
         reset = (Button) findViewById(R.id.reset);   
         editText = (EditText) findViewById(R.id.editOne);   
         String testString = editText.getText().toString();   
         double [] Ypoints = new double[]{5,4,6,3,5};;   
         if(!"".equals(testString)&&testString!=null){   
             String [] strings = testString.split(",");   
             Ypoints = new double[strings.length];   
             for(int i=0;i<strings.length;i++){   
                 Ypoints[i] = Integer.valueOf(strings[i]);   
             }   
         }   
         lineView(Ypoints);    
            
            
     }   
    
     @Override   
     public boolean onCreateOptionsMenu(Menu menu) {   
         // Inflate the menu; this adds items to the action bar if it is present.   
         getMenuInflater().inflate(R.menu.main, menu);   
         return true;   
     }   
        
     class SumbitClickListener implements OnClickListener{   
    
         @Override   
         public void onClick(View v) {   
             String tempString = editText.getText().toString();   
             String [] tempStrings =null;   
             if(tempString.contains(",")){   
                 tempStrings = tempString.split(",");   
             }else if(tempString.contains("，")){   
                 tempStrings = tempString.split("，");   
             }   
             double []temppoints = new double[tempStrings.length];   
             for(int i=0;i<tempStrings.length;i++){   
                 temppoints[i] = Integer.valueOf(tempStrings[i]);   
             }   
             lineView(temppoints);              
         }   
            
     }   
        
     //折线图   
     public void lineView(double [] Ypoints){   
         //同样是需要数据dataset和视图渲染器renderer   
         XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();   
         XYSeries  series = new XYSeries("第一条线");   
         String [] strs = new String [Ypoints.length];   
         for(int i=0;i<Ypoints.length;i++){   
             series.add(i+1, Ypoints[i]);   
             strs[i] =(i+1)+"月";   
         }   
         mDataset.addSeries(series);   
         XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();   
         //设置图表的X轴的当前方向   
         mRenderer.setOrientation(XYMultipleSeriesRenderer.Orientation.HORIZONTAL);   
         mRenderer.setXTitle("日期");//设置为X轴的标题   
         mRenderer.setYTitle("价格");//设置y轴的标题   
         mRenderer.setAxisTitleTextSize(20);//设置轴标题文本大小   
         mRenderer.setChartTitle("价格走势图");//设置图表标题   
         mRenderer.setChartTitleTextSize(30);//设置图表标题文字的大小   
         mRenderer.setLabelsTextSize(18);//设置标签的文字大小   
         mRenderer.setLegendTextSize(20);//设置图例文本大小   
         mRenderer.setPointSize(10f);//设置点的大小   
         mRenderer.setYAxisMin(0);//设置y轴最小值是0   
         mRenderer.setYAxisMax(15);   
         mRenderer.setYLabels(10);//设置Y轴刻度个数（貌似不太准确）   
         mRenderer.setXAxisMax(strs.length+1);   
         mRenderer.setShowGrid(true);//显示网格   
         //将x标签栏目显示如：1,2,3,4替换为显示1月，2月，3月，4月   
         for(int i=0;i<strs.length;i++){   
             mRenderer.addXTextLabel(i+1, strs[i]);   
         }   
         mRenderer.setXLabels(0);//设置只显示如1月，2月等替换后的东西，不显示1,2,3等   
         mRenderer.setMargins(new int[] { 20, 30, 15, 20 });//设置视图位置   
          
         XYSeriesRenderer r = new XYSeriesRenderer();//(类似于一条线对象)   
         r.setColor(Color.BLUE);//设置颜色   
         r.setPointStyle(PointStyle.CIRCLE);//设置点的样式   
         r.setFillPoints(true);//填充点（显示的点是空心还是实心）   
         r.setDisplayChartValues(true);//将点的值显示出来   
         r.setChartValuesSpacing(10);//显示的点的值与图的距离   
         r.setChartValuesTextSize(25);//点的值的文字大小   
         r.setLineWidth(3);//设置线宽   
         mRenderer.addSeriesRenderer(r);   
         
         LinearLayout layout = (LinearLayout) findViewById(R.id.lineChar);   
         Gview = ChartFactory.getLineChartView(this, mDataset, mRenderer);   
         Gview.setBackgroundColor(Color.BLACK);   
        //移除原有的LinearLayout中的视图控件   
         layout.removeAllViewsInLayout();   
         layout.addView(Gview);   
     }   
 }   

B对应布局文件如下：

[html]view plaincopy 
   
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
     xmlns:tools="http://schemas.android.com/tools"   
     android:layout_width="match_parent"   
     android:layout_height="match_parent"   
     android:paddingBottom="@dimen/activity_vertical_margin"   
     android:paddingLeft="@dimen/activity_horizontal_margin"   
     android:paddingRight="@dimen/activity_horizontal_margin"   
     android:paddingTop="@dimen/activity_vertical_margin"   
     tools:context="com.test.testlinechar.Activity_01" >   
    
     <!--  android:layout_above="将该控件的底部置于给定ID的控件之上" -->   
     <!--  android:layout_below="将该控件的底部置于给定ID的控件之下" -->   
     <!--  android:layout_toLeftOf="将该控件的右边缘和给定ID的控件的左边缘对齐" -->   
     <!--  android:layout_toRightOf="将该控件的左边缘和给定ID的控件的右边缘对齐" -->   
     <TextView   
         android:layout_width="wrap_content"   
         android:layout_height="wrap_content"   
         android:text="@string/hello_world"     
         android:id="@+id/textOne"   
          />   
     <EditText    
             android:layout_width="fill_parent"   
             android:layout_height="wrap_content"   
             android:id="@+id/editOne"   
             android:layout_below="@id/textOne"   
         />   
        
       <Button    
           android:layout_width="wrap_content"   
           android:layout_height="wrap_content"   
           android:id="@+id/submit"   
           android:layout_alignParentRight="true"   
           android:layout_below="@id/editOne"   
           android:text="@string/submit"   
           />   
       <Button    
           android:layout_width="wrap_content"   
           android:layout_height="wrap_content"   
           android:id="@+id/reset"   
           android:layout_toLeftOf="@id/submit"   
           android:layout_below="@id/editOne"   
            android:text="@string/reset"   
           />   
     <LinearLayout android:id="@+id/lineChar"    
         android:orientation="horizontal"    
    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:layout_below="@id/submit"   
      />     
     
        
 </RelativeLayout>   

效果图如下：

2.点击“折线图”，进入默认页面如图：

3.在输入框中输入数据，点击“确定”按钮，如图：

以上，图形根据输入的数据动态的更新了，但是还有一个小问题，当输入的数字个数为4个的时候，点的附近没有都显示“值”，

当输入的数据个数为3个的时候，点的值都显示了，可能是那个地方的设置要调整吧，我想这个都是小问题了，先就到这里。

解决方案：

https://code.google.com/p/achartengine/issues/detail?id=228
这个人去年提出了这个bug，最新版的jar已经修复了。但是！但是我们下载从官网下载的1.0不包括这个修复，要去achart的官网下载1.10RC版，然后使用renderer.setDisplayChartValuesDistance(30)，就可以了。

原理就是原先每个值默认的间距是100，太宽了，放在linechart上回导致互相影响，设小一点或者把line间距放大就解决了！

achartengine之折线图

热门文章

最新文章

相关电子书