رسم نمودار در اندروید با 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 استفاده کنید (می توانید به کد داخل دمو مراجعه کنید)

نتیجه :

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

دیدگاه‌ها

10

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

با سلام ببخشید می خواستم ببینم چگونه می توان نموداری شبیه لینک زیر رسم کرد و در ضمن فایل های پروژه موجود در لینک زیر را چگونه به آندروید استودیو اضافه کنم

http://www.kelidestan.com/keys/keys.php?key=2918

سلام ، کار دشواری نیست باید برای x از یک مقدار منفی یا یک مقدار مثبت مقدار دهی کنی با بازه ثابت ، مثلاً از منفی بیست تا مثبت بیست  با فاصله نیم ، به ازای هر x مقدار y متناظر با اون رو به دست بیاری و بعد از XY Plot که تو آموزش (کد دوم) هست استفاده کنی

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

http://safecomp.ir/fa/node/77

سوال دوم رو بهتره توی همون سایت مطرح کنید

 

سلام میخواستم ببینم همچین آموزشی واسه ایجاد چارت سازمانی دارین یا میتونین بزارین ؟

تا جایی که من میدونم کتابخونه قوی ای برای این کار وجود نداره ، یا باید خودت ابزارش رو بسازی که خیلی راحت نیست

یا باید از اچ تی ام ال و ... استفاده کنی

یه نگاه به این بنداز :

https://stackoverflow.com/questions/34577023/how-to-implement-an-organiz...

و این :

https://developers.google.com/chart/interactive/docs/gallery/orgchart

خیلی عالییییییی
ممون واقعا

برنامه من با وجود اینکه لایبری را اضافه کردم و استایل و سایر قسمت ها هم اضافه شده به برنامه ولی برای نمودا میله ایی attribute ها در xml ان نمیخونه و ارور میده،چیکار کنم که مشکلم رفع بشه؟

چه اروری میده؟

نشناخته خیلی از اتریبیوت ها را
کلا با رسم این مدل نمودار مشکل دارم حتی در فایل جاوا بسیاری از توابع شناخته نشده است!!

کلاس هایی که یک سری توابعشون رو نشناخته از github دانلود کن و فایلش رو مطالعه کن ببین متد های مورد نظر رو داره؟ اگه داشت اون فایل رو به برنامه اضافه ، این روند رو تا پایان همه خطاها ادامه بده

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

Plain text

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