سلام
ترسیم نمودار خطی با استفاده از کتابخانه AchartEngine در اندروید:
آخرین ورزن کتابخانه AChartEngine (فایل jar) را از لینک زیر دانلود کنید:
http://code.google.com/p/achartengine/downloads/list
کتابخانه دانلود شده را در پوشه "libs" پروژه کپی کنید.
Right click on jar file -> Build Path -> Add to build path
در کلاس MainActivity کد زیر را قرار دهید.
import org.achartengine.ChartFactory;
import org.achartengine.chart.PointStyle;
import org.achartengine.model.XYMultipleSeriesDataset;
import org.achartengine.model.XYSeries;
import org.achartengine.renderer.BasicStroke;
import org.achartengine.renderer.XYMultipleSeriesRenderer ;
import org.achartengine.renderer.XYSeriesRenderer;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.Paint.Align;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends Activity {
private View mChart;
private String[] mMonth = new String[] {
"Jan", "Feb" , "Mar", "Apr", "May", "Jun",
"Jul", "Aug" , "Sep", "Oct", "Nov", "Dec"
};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Getting reference to the button btn_chart
Button btnChart = (Button) findViewById(R.id.btn_chart);
// Defining click event listener for the button btn_chart
OnClickListener clickListener = new OnClickListener() {
@Override
public void onClick(View v) {
// Draw the Income vs Expense Chart
openChart();
}
};
// Setting event click listener for the button btn_chart of the MainActivity layout
btnChart.setOnClickListener(clickListener);
}
private void openChart(){
int[] x = { 0,1,2,3,4,5,6,7, 8, 9, 10, 11 };
int[] income = { 2000,2500,2700,3000,2800,3500,3700,3800, 0,0,0,0};
int[] expense = {2200, 2700, 2900, 2800, 2600, 3000, 3300, 3400, 0, 0, 0, 0 };
// Creating an XYSeries for Income
XYSeries incomeSeries = new XYSeries("Income");
// Creating an XYSeries for Expense
XYSeries expenseSeries = new XYSeries("Expense");
// Adding data to Income and Expense Series
for(int i=0;i<x.length;i++){
incomeSeries.add(i,income[i]);
expenseSeries.add(i,expense[i]);
}
// Creating a dataset to hold each series
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
// Adding Income Series to the dataset
dataset.addSeries(incomeSeries);
// Adding Expense Series to dataset
dataset.addSeries(expenseSeries);
// Creating XYSeriesRenderer to customize incomeSeries
XYSeriesRenderer incomeRenderer = new XYSeriesRenderer();
incomeRenderer.setColor(Color.CYAN); //color of the graph set to cyan
incomeRenderer.setFillPoints(true);
incomeRenderer.setLineWidth(2f);
incomeRenderer.setDisplayChartValues(true);
//setting chart value distance
incomeRenderer.setDisplayChartValuesDistance(10);
//setting line graph point style to circle
incomeRenderer.setPointStyle(PointStyle.CIRCLE);
//setting stroke of the line chart to solid
incomeRenderer.setStroke(BasicStroke.SOLID);
// Creating XYSeriesRenderer to customize expenseSeries
XYSeriesRenderer expenseRenderer = new XYSeriesRenderer();
expenseRenderer.setColor(Color.GREEN);
expenseRenderer.setFillPoints(true);
expenseRenderer.setLineWidth(2f);
expenseRenderer.setDisplayChartValues(true);
//setting line graph point style to circle
expenseRenderer.setPointStyle(PointStyle.SQUARE);
//setting stroke of the line chart to solid
expenseRenderer.setStroke(BasicStroke.SOLID);
// Creating a XYMultipleSeriesRenderer to customize the whole chart
XYMultipleSeriesRenderer multiRenderer = new XYMultipleSeriesRenderer();
multiRenderer.setXLabels(0);
multiRenderer.setChartTitle("Income vs Expense Chart");
multiRenderer.setXTitle("Year 2014");
multiRenderer.setYTitle("Amount in Dollars");
/***
* Customizing graphs
*/
//setting text size of the title
multiRenderer.setChartTitleTextSize(28);
//setting text size of the axis title
multiRenderer.setAxisTitleTextSize(24);
//setting text size of the graph lable
multiRenderer.setLabelsTextSize(24);
//setting zoom buttons visiblity
multiRenderer.setZoomButtonsVisible(false);
//setting pan enablity which uses graph to move on both axis
multiRenderer.setPanEnabled(false, false);
//setting click false on graph
multiRenderer.setClickEnabled(false);
//setting zoom to false on both axis
multiRenderer.setZoomEnabled(false, false);
//setting lines to display on y axis
multiRenderer.setShowGridY(true);
//setting lines to display on x axis
multiRenderer.setShowGridX(true);
//setting legend to fit the screen size
multiRenderer.setFitLegend(true);
//setting displaying line on grid
multiRenderer.setShowGrid(true);
//setting zoom to false
multiRenderer.setZoomEnabled(false);
//setting external zoom functions to false
multiRenderer.setExternalZoomEnabled(false);
//setting displaying lines on graph to be formatted(like using graphics)
multiRenderer.setAntialiasing(true);
//setting to in scroll to false
multiRenderer.setInScroll(false);
//setting to set legend height of the graph
multiRenderer.setLegendHeight(30);
//setting x axis label align
multiRenderer.setXLabelsAlign(Align.CENTER);
//setting y axis label to align
multiRenderer.setYLabelsAlign(Align.LEFT);
//setting text style
multiRenderer.setTextTypeface("sans_serif", Typeface.NORMAL);
//setting no of values to display in y axis
multiRenderer.setYLabels(10);
// setting y axis max value, Since i'm using static values inside the graph so i'm setting y max value to 4000.
// if you use dynamic values then get the max y value and set here
multiRenderer.setYAxisMax(4000);
//setting used to move the graph on xaxiz to .5 to the right
multiRenderer.setXAxisMin(-0.5);
//setting used to move the graph on xaxiz to .5 to the right
multiRenderer.setXAxisMax(11);
//setting bar size or space between two bars
//multiRenderer.setBarSpacing(0.5);
//Setting background color of the graph to transparent
multiRenderer.setBackgroundColor(Color.TRANSPARENT );
//Setting margin color of the graph to transparent
multiRenderer.setMarginsColor(getResources().getCo lor(R.color.transparent_background));
multiRenderer.setApplyBackgroundColor(true);
multiRenderer.setScale(2f);
//setting x axis point size
multiRenderer.setPointSize(4f);
//setting the margin size for the graph in the order top, left, bottom, right
multiRenderer.setMargins(new int[]{30, 30, 30, 30});
for(int i=0; i< x.length;i++){
multiRenderer.addXTextLabel(i, mMonth[i]);
}
// Adding incomeRenderer and expenseRenderer to multipleRenderer
// Note: The order of adding dataseries to dataset and renderers to multipleRenderer
// should be same
multiRenderer.addSeriesRenderer(incomeRenderer);
multiRenderer.addSeriesRenderer(expenseRenderer);
//this part is used to display graph on the xml
LinearLayout chartContainer = (LinearLayout) findViewById(R.id.chart);
//remove any views before u paint the chart
chartContainer.removeAllViews();
//drawing bar chart
mChart = ChartFactory.getLineChartView(MainActivity.this, dataset, multiRenderer);
//adding the view to the linearlayout
chartContainer.addView(mChart);
}
}
activity_main.xml را باز کنید و کد زیر را در آن قرار دهید:
<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"> <Button android:id="@+id/btn_chart" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="33dp" android:text="Draw chart" /> <LinearLayout android:id="@+id/chart" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:layout_below="@+id/btn_chart" tools:ignore="Orientation" > </LinearLayout> </RelativeLayout>
فایل color.xml را در پوشه values ایجاد کنید و کد زیر را در آن قرار دهید.
<?xml version="1.0" encoding="utf-8"?><resources> <color name="transparent_background">#00FF0000</color></resources>
در این مثال نمودار با تاچ باتن در همان اکتیویتی نمایش داده می شود. اگر شما می خواهید در یک اکتیویتی دیگر نمایش داده شود:
// Creating an intent to plot bar chart using dataset and multipleRenderer Intent intent = ChartFactory.getLineChartIntent(getBaseContext(), dataset, multiRenderer); // Start Activity startActivity(intent);
و این کد در فایل manifest، در زیر application:
<activity android:name="org.achartengine.GraphicalActivity" />
هم چنین شما می توانید یک background image برای نمودار داشته باشید. یک تصویر در پوشه res/drawable قرار دهید. حالا activity_main.xml را باز کنید و کد زیر را بین خط های 3 و 4 قرار دهید.
[CODE]android:background:"@drawable/imageName"
در این مثال من استایل نقاط نمودار را به Circle تنظیم کردم برای incomeRenderer و Square برای expenseRenderer.
شما می توانید از Circle و Square و Diamond و Triangle & Point (استایل پیشفرض) استفاده کنید.
در این مثال من استایل stroke را به solid تنظیم کردم. شما می توانید از Solid یا Dotted یا Dashed استفاده کنید.