رسم نمودار در اندروید با Androidplot

در بسیاری از نرم افزار های محاسباتی ، آماری و ... نیاز پیدا می کنیم تا نمودار های مختلفی را به صورت میله ای ، خطی ، دایره ای و ... رسم کنیم ، ابزار ها و کتابخانه های زیادی در رابطه با رسم نمودار در اندروید وجود دارند که بعضی بسیار ساده بوده و بعضی امکانات بیشتری دارند ، حتی خودتان نیز می توانید کتابخانه اختصاصی خودتان را برای اینکار ایجاد کنید (این موضوع را بعداً در یک آموزش مطرح خواهم کرد ) ولی در این آموزش با کتابخانه Androidplot آشنا می شویم ، این کتابخانه امکانات زیاد و جالبی دارد و برای رسم نمودار های مختلف یک انتخاب بسیار خوب محسوب می شود.

برای آشنایی با امکانات این کتابخانه می توانید دمو آن را دانلود و نصب کنید.

روش های زیادی برای اضافه کردن این کتابخانه به برنامه اندرویدی وجود دارد ، می توانید سورس آن را از آدرس زیر به دست آورده و آن را به برنامه خود اضافه کنید :

https://github.com/halfhp/androidplot

می توانید نسخه jar آن را دانلود کنید :

http://androidplot.com/download

و یا نسخه دمو آن را تغییر دهید (احتمالاً ساده ترین کار در بسیاری از موارد همین است)

و یا از ابزار های dependency استفاده کنید.

در ادامه با بعضی از امکانات این کتابخانه آشنا می شویم.

ابتدا یک پروژه اندرویدی جدید به نام AndroidPlotExample ایجاد می کنیم و به یکی از روش های دلخواه خودمان کتابخانه فوق را به آن اضافه می کنیم :

فایل xml اصلی برنامه (یعنی activity_main.xml) را به صورت زیر طراحی می کنیم :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.androidplot.xy.XYPlot
        android:id="@+id/plot"
        style="@style/APDefacto.Dark"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        ap:domainLabel="domain"
        ap:label="A Simple XY Plot"
        ap:rangeLabel="range" />

</LinearLayout>

کد جاوای اکتیویتی را به صورت زیر می نویسیم (این کد از روی مستندات کتابخانه گرفته شده است) :


package safecomp.ir.androidplotexample;

import android.app.Activity;
import android.os.Bundle;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYSeries;
import com.androidplot.xy.*;
import java.util.Arrays;

public class MainActivity extends Activity {

	private XYPlot plot;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		plot = (XYPlot) findViewById(R.id.plot);

		// create a couple arrays of y-values to plot:
		Number[] series1Numbers = { 1, 4, 2, 8, 4, 16, 8, 32, 16, 64 };
		Number[] series2Numbers = { 5, 2, 10, 5, 20, 10, 40, 20, 80, 40 };

		// turn the above arrays into XYSeries':
		// (Y_VALS_ONLY means use the element index as the x value)
		XYSeries series1 = new SimpleXYSeries(Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series1");

		XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2");

		// create formatters to use for drawing a series using
		// LineAndPointRenderer
		LineAndPointFormatter series1Format = new LineAndPointFormatter();

		LineAndPointFormatter series2Format = new LineAndPointFormatter();

		// add a new series' to the xyplot:
		plot.addSeries(series1, series1Format);
		plot.addSeries(series2, series2Format);

	}
}


برنامه را اجرا می کنیم :

خوشبختانه این کتابخانه هنگام چرخش نیز نمایش خوبی دارد :

همانطور که می بینید رویه بسیار ساده ای را باید دنبال کنیم ، یک XYSeries ایجاد می کنیم و آن را به همراه XYSeriesFormatter به plot اضافه می کنیم. تنظمیات مختلفی را می توان بر روی این نمودار انجام داد که در ادامه چند مورد می بینیم :

در داخل پوشه res پوشه جدیدی به نام xml ایجاد می کنیم ، در داخل پوشه xml فایل جدیدی به نام line_point_formatter_with_labels.xml ایجاد می کنیم و تنظیمات زیر را در آن می نویسیم :


<?xml version="1.0" encoding="utf-8"?>
<config
    fillPaint.color="#00000000"
    linePaint.color="#00AA00"
    linePaint.strokeWidth="5dp"
    pointLabelFormatter.textPaint.color="#CCCCCC"
    vertexPaint.color="#007700"
    vertexPaint.strokeWidth="20dp" />


همانطور که مشاهده می کنید فایل فوق تنظیماتی از قبیل رنگ linePaint ، ذخامت آن ، رنگ پر کردن (در اینجا رنگی با آلفای صفر می نویسیم تا پر کردن انجام نشود) و ... غیره را مشخص می کند.

فایل دیگری به نام line_point_formatter_with_labels_2.xml در همان پوشه xml ایجاد می کنیم و تنظیمات زیر را در آن می نویسیم :


<?xml version="1.0" encoding="utf-8"?>
<config
    fillPaint.color="#00000000"
    linePaint.color="#0000AA"
    linePaint.strokeWidth="5dp"
    pointLabelFormatter.textPaint.color="#CCCCCC"
    vertexPaint.color="#000099"
    vertexPaint.strokeWidth="20dp" />


حالا باید از تنظیمات فوق استفاده کنیم ، کد اکتیویتی را به صورت زیر تغییر می دهیم :


package safecomp.ir.androidplotexample;

import android.app.Activity;
import android.os.Bundle;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYSeries;
import com.androidplot.xy.*;
import java.util.Arrays;

public class MainActivity extends Activity {

	private XYPlot plot;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		plot = (XYPlot) findViewById(R.id.plot);

		// create a couple arrays of y-values to plot:
		Number[] series1Numbers = { 1, 4, 2, 8, 4, 16, 8, 32, 16, 64 };
		Number[] series2Numbers = { 5, 2, 10, 5, 20, 10, 40, 20, 80, 40 };

		// turn the above arrays into XYSeries':
		// (Y_VALS_ONLY means use the element index as the x value)
		XYSeries series1 = new SimpleXYSeries(Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series1");

		XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2");

		// create formatters to use for drawing a series using
		// LineAndPointRenderer
		// and configure them from xml:
		LineAndPointFormatter series1Format = new LineAndPointFormatter();
		series1Format.setPointLabelFormatter(new PointLabelFormatter());
		series1Format.configure(getApplicationContext(), R.xml.line_point_formatter_with_labels);

		LineAndPointFormatter series2Format = new LineAndPointFormatter();
		series2Format.setPointLabelFormatter(new PointLabelFormatter());
		series2Format.configure(getApplicationContext(), R.xml.line_point_formatter_with_labels_2);

		// add a new series' to the xyplot:
		plot.addSeries(series1, series1Format);
		plot.addSeries(series2, series2Format);

	}
}


نتیجه :

دقت کنید که قبل از فراخوانی متد configure حتماً باید از setPointLabelFormatter استفاده کنید.

حتی اگر بخواهیم می توانیم نمودار را به صورت خط تیر نمایش دهیم :


package safecomp.ir.androidplotexample;

import android.app.Activity;
import android.graphics.DashPathEffect;
import android.os.Bundle;

import com.androidplot.util.PixelUtils;
import com.androidplot.xy.*;

import java.util.Arrays;

public class MainActivity extends Activity {

	private XYPlot plot;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		plot = (XYPlot) findViewById(R.id.plot);

		// create a couple arrays of y-values to plot:
		Number[] series1Numbers = { 1, 4, 2, 8, 4, 16, 8, 32, 16, 64 };
		Number[] series2Numbers = { 5, 2, 10, 5, 20, 10, 40, 20, 80, 40 };

		// turn the above arrays into XYSeries':
		// (Y_VALS_ONLY means use the element index as the x value)
		XYSeries series1 = new SimpleXYSeries(Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series1");

		XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2");

		// create formatters to use for drawing a series using
		// LineAndPointRenderer
		// and configure them from xml:
		LineAndPointFormatter series1Format = new LineAndPointFormatter();
		series1Format.setPointLabelFormatter(new PointLabelFormatter());
		series1Format.configure(getApplicationContext(), R.xml.line_point_formatter_with_labels);

		LineAndPointFormatter series2Format = new LineAndPointFormatter();
		series2Format.setPointLabelFormatter(new PointLabelFormatter());
		series2Format.configure(getApplicationContext(), R.xml.line_point_formatter_with_labels_2);

		// add an "dash" effect to the series2 line:
		series2Format.getLinePaint().setPathEffect(new DashPathEffect(new float[] {
				// // always use DP when specifying pixel sizes, to keep things
				// // consistent across devices:
				PixelUtils.dpToPix(20), PixelUtils.dpToPix(15) }, 0));

		// add a new series' to the xyplot:
		plot.addSeries(series1, series1Format);
		plot.addSeries(series2, series2Format);

	}
}


نتیجه :

تنظیمات بسیار بیشتری نیز وجود دارند که در اینجا برای سادگی مطلب به آن ها اشاره ای نمی کنم و می توانید به مثال اصلی مراجعه کنید.

 

Pie Chart : 

Pie Chart ابزاری ساده برای رسم نمودار های دایره ای شکل است ، در اینجا با یک مثال بسیار ساده از این نوع نمودار آشنا می شویم ، در مثال زیر کلیک بر روی سگمنت ها را نیز تشخیص می دهیم.

فایل xml اصلی برنامه را به صورت زیر تغییر می دهیم :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.androidplot.pie.PieChart
        android:id="@+id/mySimplePieChart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        androidPlot.title="A Simple Pie Chart"
        androidPlot.titleWidget.labelPaint.textSize="20sp" />

</LinearLayout>

کد اکتیویتی را نیز به صورت زیر تغییر می دهیم :


package safecomp.ir.androidplotexample;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import com.androidplot.pie.PieChart;
import com.androidplot.pie.PieRenderer;
import com.androidplot.pie.Segment;
import com.androidplot.pie.SegmentFormatter;

public class MainActivity extends Activity {

	PieChart pie;

	Segment s1;
	Segment s2;
	Segment s3;
	Segment s4;

	@Override
	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		pie = (PieChart) findViewById(R.id.mySimplePieChart);

		// detect segment clicks:
		pie.setOnTouchListener(new View.OnTouchListener() {
			@Override
			public boolean onTouch(View view, MotionEvent motionEvent) {
				PointF click = new PointF(motionEvent.getX(), motionEvent.getY());
				if (pie.getPieWidget().containsPoint(click)) {
					Segment segment = pie.getRenderer(PieRenderer.class).getContainingSegment(click);
					if (segment != null) {
						Toast.makeText(getApplicationContext(), "Segment: " + segment.getTitle(), Toast.LENGTH_LONG).show();
					}
				}
				return false;
			}

		});

		s1 = new Segment("s1", 10);
		s2 = new Segment("s2", 1);
		s3 = new Segment("s3", 10);
		s4 = new Segment("s4", 10);

		SegmentFormatter sf1 = new SegmentFormatter();
		Paint p1 = new Paint();
		p1.setColor(Color.RED);
		sf1.setFillPaint(p1);

		SegmentFormatter sf2 = new SegmentFormatter();
		Paint p2 = new Paint();
		p2.setColor(Color.GREEN);
		sf2.setFillPaint(p2);

		SegmentFormatter sf3 = new SegmentFormatter();
		Paint p3 = new Paint();
		p3.setColor(Color.BLUE);
		sf3.setFillPaint(p3);

		SegmentFormatter sf4 = new SegmentFormatter();
		Paint p4 = new Paint();
		p4.setColor(Color.MAGENTA);
		sf4.setFillPaint(p4);

		pie.addSeries(s1, sf1);
		pie.addSeries(s2, sf2);
		pie.addSeries(s3, sf3);
		pie.addSeries(s4, sf4);

	}

}


برنامه را اجرا می کنیم و روی یکی از سگمنت ها کلیک می کنیم :

 

Bar Chart :

نمودار های میله ای نمودار های پرکاربردی برای نمایش فراوانی و ... هستند ، در ادامه با نحوه ساخت نمودار های میله ای آشنا می شویم.

فایل xml اصلی برنامه را به صورت زیر تغییر می دهیم :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.androidplot.xy.XYPlot
        android:id="@+id/plot"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ap:backgroundColor="#FFFFFF"
        ap:domainLabel="Domain"
        ap:domainLabelTextColor="#000000"
        ap:domainLabelTextSize="10sp"
        ap:domainOriginTickLabelTextSize="15sp"
        ap:domainTickLabelTextColor="#000000"
        ap:graphBackgroundColor="#FFFFFF"
        ap:graphDomainLineColor="#000000"
        ap:graphMarginBottom="25dp"
        ap:graphMarginLeft="15dp"
        ap:graphMarginRight="10dp"
        ap:graphMarginTop="20dp"
        ap:graphRangeLineColor="#000000"
        ap:gridBackgroundColor="#FFFFFF"
        ap:label="graph"
        ap:labelTextColor="#000000"
        ap:labelTextSize="20sp"
        ap:legendAnchorPosition="right_bottom"
        ap:legendHeight="30dp"
        ap:legendHeightSizeLayoutType="absolute"
        ap:legendIconHeight="10dp"
        ap:legendIconHeightSizeLayoutType="absolute"
        ap:legendIconWidth="10dp"
        ap:legendIconWidthSizeLayoutType="absolute"
        ap:legendTextColor="#000000"
        ap:legendTextSize="10sp"
        ap:legendWidth="200dp"
        ap:legendWidthSizeLayoutType="absolute"
        ap:rangeLabel="range"
        ap:rangeLabelTextColor="#000000"
        ap:rangeLabelTextSize="10sp"
        ap:rangeOriginTickLabelTextSize="15sp"
        ap:rangeTickLabelTextColor="#000000" />

</LinearLayout>

همانطور که مشاهده می کنید تنظیمات زیادی از طریق فایل xml قابل دسترسی هستند ، برای لیست کامل تنظیمات می توانید به مستندات کتابخانه مراجعه کنید.

کد اکتیویتی را به صورت زیر تغییر می دهیم :


package safecomp.ir.androidplotexample;

import java.util.Arrays;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

import com.androidplot.xy.BarFormatter;
import com.androidplot.xy.BarRenderer;
import com.androidplot.xy.BarRenderer.BarRenderStyle;
import com.androidplot.xy.BarRenderer.BarWidthStyle;
import com.androidplot.xy.BoundaryMode;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYPlot;
import com.androidplot.xy.XYSeries;

public class MainActivity extends Activity {

	private XYPlot plot;

	private XYSeries series1;
	private XYSeries series2;

	// Create a couple arrays of y-values to plot:
	Number[] series1Numbers = { 2, 4, 5, 2, 7, 4, 3, 7, 4, 5 };
	Number[] series2Numbers = { 4, 6, 3, 4, 2, 1, 7, 4, 5, 4 };

	@Override
	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		plot = (XYPlot) findViewById(R.id.plot);

		BarFormatter formatter1 = new BarFormatter(Color.argb(200, 100, 150, 100), Color.LTGRAY);
		BarFormatter formatter2 = new BarFormatter(Color.argb(200, 100, 100, 150), Color.LTGRAY);

		// reduce the number of range labels
		plot.setTicksPerRangeLabel(3);
		plot.setRangeLowerBoundary(0, BoundaryMode.FIXED);
		plot.getGraphWidget().getGridBox().setPadding(30, 10, 30, 0);

		plot.setTicksPerDomainLabel(2);

		series1 = new SimpleXYSeries(Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "A");
		series2 = new SimpleXYSeries(Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "B");

		plot.addSeries(series1, formatter1);
		plot.addSeries(series2, formatter2);

		BarRenderer renderer = (BarRenderer) plot.getRenderer(BarRenderer.class);
		renderer.setBarRenderStyle(BarRenderStyle.SIDE_BY_SIDE);
		renderer.setBarWidthStyle(BarWidthStyle.FIXED_WIDTH);
		renderer.setBarWidth(30);

	}

}


نتیجه :

BarRenderStyle حالت متفاوت دیگری را نیز در اختیار شما قرار می دهد که می توانید خودتان امتحان کنید.

 

Step Chart :

step chart تا حدودی شبیه نمودار میله ای است ولی حالتی پیوسته دارد و برای نمودار های تحلیل زمانی مناسب است ، نمونه ای از چنین نمودار هایی را در برنامه های مدیریت حافظه یا بار شبکه و غیره می توان دید.

کدی که در برنامه دمو وجود دارد بسیار ساده است و برای همین همان کد را با کمترین دست کاری در ادامه می بینیم.

ابتدا فایل xml  اصلی برنامه را به صورت زیر تغییر می دهیم :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.androidplot.xy.XYPlot
        android:id="@+id/stepChartExamplePlot"
        style="@style/APDefacto.Dark"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        ap:domainLabel="time (secs)"
        ap:label="HTTP Server State (15  Sec)"
        ap:rangeLabel="server state" />

</LinearLayout>

کد اکتیویتی را به شکل زیر تغییر می دهیم :


package safecomp.ir.androidplotexample;

import android.app.Activity;
import android.graphics.*;
import android.os.Bundle;
import com.androidplot.util.PixelUtils;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYSeries;
import com.androidplot.xy.*;

import java.text.DecimalFormat;
import java.text.FieldPosition;
import java.text.Format;
import java.text.ParsePosition;
import java.util.Arrays;

public class MainActivity extends Activity {

	private XYPlot mySimpleXYPlot;

	@Override
	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		mySimpleXYPlot = (XYPlot) findViewById(R.id.stepChartExamplePlot);

		// y-vals to plot:
		Number[] series1Numbers = { 1, 2, 3, 4, 2, 3, 4, 2, 5, 2, 3, 4, 2, 3, 2, 2 };

		// create our series from our array of nums:
		XYSeries series1 = new SimpleXYSeries(Arrays.asList(series1Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Thread #1");

		final int screenHeightPx = getWindowManager().getDefaultDisplay().getHeight();

		// setup our line fill paint to be a slightly transparent gradient:
		Paint lineFill = new Paint();
		lineFill.setAlpha(200);
		lineFill.setShader(new LinearGradient(0, 0, 0, screenHeightPx, Color.WHITE, Color.BLUE, Shader.TileMode.MIRROR));

		StepFormatter stepFormatter = new StepFormatter(Color.WHITE, Color.BLUE);
		stepFormatter.setVertexPaint(null); // don't draw individual points
		stepFormatter.getLinePaint().setStrokeWidth(PixelUtils.dpToPix(3));

		stepFormatter.getLinePaint().setAntiAlias(false);
		stepFormatter.setFillPaint(lineFill);
		mySimpleXYPlot.addSeries(series1, stepFormatter);

		// adjust the domain/range ticks to make more sense; label per tick for
		// range and label per 5 ticks domain:
		mySimpleXYPlot.setRangeStep(XYStepMode.INCREMENT_BY_VAL, 1);
		mySimpleXYPlot.setDomainStep(XYStepMode.INCREMENT_BY_VAL, 1);
		mySimpleXYPlot.setTicksPerRangeLabel(1);
		mySimpleXYPlot.setTicksPerDomainLabel(5);

		// get rid of decimal points in our domain labels:
		mySimpleXYPlot.setDomainValueFormat(new DecimalFormat("0"));

		// create a custom getFormatter to draw our state names as range tick
		// labels:
		mySimpleXYPlot.setRangeValueFormat(new Format() {
			@Override
			public StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos) {
				Number num = (Number) obj;
				switch (num.intValue()) {
				case 1:
					toAppendTo.append("Init");
					break;
				case 2:
					toAppendTo.append("Idle");
					break;
				case 3:
					toAppendTo.append("Recv");
					break;
				case 4:
					toAppendTo.append("Send");
					break;
				default:
					toAppendTo.append("???");
					break;
				}
				return toAppendTo;
			}

			@Override
			public Object parseObject(String source, ParsePosition pos) {
				return null;
			}
		});
	}

}


در این کد می بینید که: چگونه می توانیم از Gradient برای رنگ کردن نمودار استفاده کنیم ، چگونه می توانیم با null کردن VertexPaint نقاط را نمایش ندهیم ، چگونه می توانیم Step ها را در range یا domain تعیین کنیم ،چگونه می توانیم به جای نمایش ممیز شناور از نمایش صحیح استفاده کنیم و چگونه RangeValueFormat را باز نویسی کنیم تا به جای عدد مقادیر دلخواه ما را نمایش دهد.

نتیجه :

 

Scatter Chart :

Scatter Chart برای رسم نمودار های پراکنده به کار می رود.

فایل xml اصلی برنامه را به صورت زیر تغییر می دهیم :


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ap="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.androidplot.xy.XYPlot
        android:id="@+id/plot"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        ap:backgroundColor="#000000"
        ap:borderColor="#000000"
        ap:domainLabel="domain"
        ap:domainLabelTextSize="13sp"
        ap:domainOriginTickLabelTextSize="15sp"
        ap:domainTickLabelTextSize="15sp"
        ap:graphBackgroundColor="#000000"
        ap:graphDomainLineColor="#FFFFFF"
        ap:graphDomainLineThickness="1dp"
        ap:graphMarginBottom="40dp"
        ap:graphMarginLeft="15dp"
        ap:graphMarginRight="10dp"
        ap:graphMarginTop="20dp"
        ap:graphRangeLineColor="#FFFFFF"
        ap:graphRangeLineThickness="1dp"
        ap:gridBackgroundColor="#111111"
        ap:gridPaddingBottom="20dp"
        ap:gridPaddingLeft="20dp"
        ap:gridPaddingRight="20dp"
        ap:gridPaddingTop="20dp"
        ap:label="A Scatter Plot"
        ap:labelTextSize="20sp"
        ap:legendAnchorPosition="right_bottom"
        ap:legendHeight="25dp"
        ap:legendIconHeight="15dp"
        ap:legendIconWidth="15dp"
        ap:legendTextSize="15sp"
        ap:rangeLabel="range"
        ap:rangeLabelTextSize="13sp"
        ap:rangeOriginTickLabelTextSize="15sp"
        ap:rangeTickLabelTextSize="15sp" />

</LinearLayout>

کد اکتیویتی را به صورت زیر تغییر می دهیم :


package safecomp.ir.androidplotexample;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

import com.androidplot.xy.BoundaryMode;
import com.androidplot.xy.LineAndPointFormatter;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYPlot;

public class MainActivity extends Activity {

	private XYPlot plot;

	float x1[] = { 1, 1, 1, 2.4f, 2.5f, 3, 10, 15 };
	float y1[] = { 2, 3, 10, 2.4f, 20, 13, 8, 6 };

	float x2[] = { 1, 2, 5, 7.4f, 12.5f, 13, 10, 19, 20, 8, 5, 9 };
	float y2[] = { 5, 8, 15, 12.4f, 17, 10, 28, 16, 3, 0, 12, 7 };

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// initialize our XYPlot reference:
		plot = (XYPlot) findViewById(R.id.plot);

		SimpleXYSeries series1 = new SimpleXYSeries("A");
		SimpleXYSeries series2 = new SimpleXYSeries("B");

		for (int i = 0; i < x1.length; i++) {
			series1.addLast(x1[i], y1[i]);
		}
		for (int i = 0; i < x2.length; i++) {
			series2.addLast(x2[i], y2[i]);
		}

		plot.setDomainBoundaries(0, 20, BoundaryMode.FIXED);
		plot.setRangeBoundaries(0, 20, BoundaryMode.FIXED);

		LineAndPointFormatter series1Format = new LineAndPointFormatter(null, Color.RED, null, null);

		LineAndPointFormatter series2Format = new LineAndPointFormatter(null, Color.GREEN, null, null);

		// add each series to the xyplot:
		plot.addSeries(series1, series1Format);
		plot.addSeries(series2, series2Format);

		// reduce the number of range labels
		plot.setTicksPerRangeLabel(3);

		// rotate domain labels 45 degrees to make them more compact
		// horizontally:
		plot.getGraphWidget().setDomainLabelOrientation(-45);
	}

}


کد فوق ساده بوده و نیاز به توضیح خاصی ندارد ، فقط دقت کنید که هنگام ساخت LineAndPointFormatter سه پارامتر مربوط به Fill و Line و PointLabelFormatter را برابر با null قرار می دهیم و فقط رنگ Vertex ها را تعیین کنیم ، برای تنظیمات بیشتر بهتر است از فایل xml برای پیکره بندی LineAndPointFormatter استفاده کنید (می توانید به کد داخل دمو مراجعه کنید)

نتیجه :

نکته : تقریباً تمام کد های این آموزش از روی کد های نسخه دمو گرفته شده اند و فقط ساده تر شده اند تا موارد مهم تر را پوشش دهند و درک این کتابخانه را آسان تر کنند ، مثال هایی که در این آموزش دیدیم بسیار مقدماتی بودند ولی قدرت این کتابخانه فراتر از این مثال هاست ، برای اطلاعات بیشتر و مطالعه مثال های پیچیده تر توصیه می کنم به مستندات کتابخانه و سورس دمو آن مراجه کنید.

دیدگاه‌ها

1

لایک خدا بر تو... به قول خود شما :دی

افزودن دیدگاه جدید

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.