AChartEngine折線圖實例


最近做項目要用到圖表,在網上找相關的解決方案找了很久,搜到最多的就是這個框架,所以就開始研究下怎么使用,首先研究的就是折線圖,如是做了一個實例。

AChartEngine下載地址:http://code.google.com/p/achartengine/downloads/list 。

先簡單描述下這個例子:用開源的圖表框架AChartEngine的折線圖顯示最近7天的最高氣溫變化趨勢。

最終效果如下圖(手機分辨率800*480,4寸大小):

布局文件activity_line_chart.xml:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     android:background="#ffffffff"
 7     tools:context=".MainActivity" >
 8     
 9     <LinearLayout android:id="@+id/chart" 
10         android:orientation="horizontal"
11         android:background="#ffffff"
12         android:splitMotionEvents="false"
13         android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1"/>
14 
15 </LinearLayout>

 

java代碼文件MainActivity.java: 

import org.achartengine.ChartFactory;
import org.achartengine.GraphicalView;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.XYMultipleSeriesRenderer;
import org.achartengine.renderer.XYSeriesRenderer;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Paint.Align;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
    LinearLayout chart;
    GraphicalView chartView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_line_chart);
        chart = (LinearLayout) findViewById(R.id.chart);
        showChart();
    }
    private void showChart() {
        XYMultipleSeriesDataset mDataSet=getDataSet();
        XYMultipleSeriesRenderer mRefender=getRefender();
        chartView=ChartFactory.getLineChartView(this, mDataSet, mRefender);
        chart.addView(chartView);
    }
    private XYMultipleSeriesDataset getDataSet() {
        XYMultipleSeriesDataset seriesDataset=new XYMultipleSeriesDataset();
        XYSeries xySeries1=new XYSeries("北京最近7天最高溫度變化趨勢");
        xySeries1.add(1, 36);
        xySeries1.add(2, 30);
        xySeries1.add(3, 27);
        xySeries1.add(4, 29);
        xySeries1.add(5, 34);
        xySeries1.add(6, 28);
        xySeries1.add(7, 33);
        seriesDataset.addSeries(xySeries1);
        
        XYSeries xySeries2=new XYSeries("北京最近7天最低溫度變化趨勢");
        xySeries2.add(1, 27);
        xySeries2.add(2, 22);
        xySeries2.add(3, 20);
        xySeries2.add(4, 21);
        xySeries2.add(5, 25);
        xySeries2.add(6, 22);
        xySeries2.add(7, 23);
        seriesDataset.addSeries(xySeries2);
        
        return seriesDataset;
    }
    private XYMultipleSeriesRenderer getRefender() {
        /*描繪器,設置圖表整體效果,比如x,y軸效果,縮放比例,顏色設置*/
        XYMultipleSeriesRenderer seriesRenderer=new XYMultipleSeriesRenderer();
        
        seriesRenderer.setChartTitleTextSize(20);//設置圖表標題的字體大小(圖的最上面文字)
        seriesRenderer.setMargins(new int[] { 40, 30, 30, 20 });//設置外邊距,順序為:上左下右
        //坐標軸設置
        seriesRenderer.setAxisTitleTextSize(16);//設置坐標軸標題字體的大小
        seriesRenderer.setYAxisMin(-50);//設置y軸的起始值
        seriesRenderer.setYAxisMax(50);//設置y軸的最大值
        seriesRenderer.setXAxisMin(0.5);//設置x軸起始值
        seriesRenderer.setXAxisMax(7.5);//設置x軸最大值
        seriesRenderer.setXTitle("日期");//設置x軸標題
        seriesRenderer.setYTitle("溫度");//設置y軸標題
        //顏色設置
        seriesRenderer.setApplyBackgroundColor(true);//是應用設置的背景顏色
        seriesRenderer.setLabelsColor(0xFF85848D);//設置標簽顏色
        seriesRenderer.setBackgroundColor(Color.argb(100, 255, 231, 224));//設置圖表的背景顏色
        //縮放設置
        seriesRenderer.setZoomButtonsVisible(false);//設置縮放按鈕是否可見
        seriesRenderer.setZoomEnabled(false); //圖表是否可以縮放設置  
        seriesRenderer.setZoomInLimitX(7);
//      seriesRenderer.setZoomRate(1);//縮放比例設置
        //圖表移動設置
        seriesRenderer.setPanEnabled(false);//圖表是否可以移動 
        
        //legend(最下面的文字說明)設置
//      seriesRenderer.setShowLegend(true);//控制legend(說明文字 )是否顯示
//      seriesRenderer.setLegendHeight(80);//設置說明的高度,單位px
//      seriesRenderer.setLegendTextSize(16);//設置說明字體大小
        //坐標軸標簽設置
        seriesRenderer.setLabelsTextSize(14);//設置標簽字體大小
        seriesRenderer.setXLabelsAlign(Align.CENTER);
        seriesRenderer.setYLabelsAlign(Align.LEFT);
        seriesRenderer.setXLabels(0);//顯示的x軸標簽的個數
        seriesRenderer.addXTextLabel(1, "6/24");//針對特定的x軸值增加文本標簽
        seriesRenderer.addXTextLabel(2, "6/25");
        seriesRenderer.addXTextLabel(3, "6/26");
        seriesRenderer.addXTextLabel(4, "6/27");
        seriesRenderer.addXTextLabel(5, "6/28");
        seriesRenderer.addXTextLabel(6, "6/29");
        seriesRenderer.addXTextLabel(7, "今天");
        seriesRenderer.setPointSize(3);//設置坐標點大小

        seriesRenderer.setMarginsColor(Color.WHITE);//設置外邊距空間的顏色
        seriesRenderer.setClickEnabled(false);
        seriesRenderer.setChartTitle("北京最近7天溫度變化趨勢圖");

        /*某一組數據的描繪器,描繪該組數據的個性化顯示效果,主要是字體跟顏色的效果*/
        XYSeriesRenderer xySeriesRenderer1=new XYSeriesRenderer();
        xySeriesRenderer1.setAnnotationsColor(0xFFFF0000);//設置注釋(注釋可以着重標注某一坐標)的顏色
        xySeriesRenderer1.setAnnotationsTextAlign(Align.CENTER);//設置注釋的位置
        xySeriesRenderer1.setAnnotationsTextSize(12);//設置注釋文字的大小
        xySeriesRenderer1.setPointStyle(PointStyle.CIRCLE);//坐標點的顯示風格
        xySeriesRenderer1.setPointStrokeWidth(3);//坐標點的大小
        xySeriesRenderer1.setColor(0xFFF46C48);//表示該組數據的圖或線的顏色
        xySeriesRenderer1.setDisplayChartValues(false);//設置是否顯示坐標點的y軸坐標值
        xySeriesRenderer1.setChartValuesTextSize(12);//設置顯示的坐標點值的字體大小
        
        /*某一組數據的描繪器,描繪該組數據的個性化顯示效果,主要是字體跟顏色的效果*/
        XYSeriesRenderer xySeriesRenderer2=new XYSeriesRenderer();
        xySeriesRenderer2.setPointStyle(PointStyle.CIRCLE);//坐標點的顯示風格
        xySeriesRenderer2.setPointStrokeWidth(3);//坐標點的大小
        xySeriesRenderer2.setColor(0xFF00C8FF);//表示該組數據的圖或線的顏色
        xySeriesRenderer2.setDisplayChartValues(false);//設置是否顯示坐標點的y軸坐標值
        xySeriesRenderer2.setChartValuesTextSize(12);//設置顯示的坐標點值的字體大小
        
        seriesRenderer.addSeriesRenderer(xySeriesRenderer1);
        seriesRenderer.addSeriesRenderer(xySeriesRenderer2);
        return seriesRenderer;
    }
}

 

 遇到的問題:

  1.圖表中顯示文字(圖表標題,XY軸標簽,說明文字)的大小單位是像素,會導致在高像素密度的設備上顯示的字體非常小,在低像素密度的設備上顯示字體偏大的情況,這個問題目前還不知道怎么解決。

  2.還有就是已經設置了禁止縮放:

seriesRenderer.setZoomEnabled(false);

但是實際運行的效果是通過雙指進行操作竟然能夠縮放。

源碼下載

 

補充:

把某個坐標點標注出來,比如說把最高氣溫(1,36)這個坐標着重標注出來。

XYSeries seriesAt = mDataSet.getSeriesAt(0);//mDataSet為數據設置器XYMultipleSeriesDataset
seriesAt.addAnnotation("最高", 1, 36);

效果如下(xiaomi3截屏):


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM