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

به نام خدا

با سلام خدمت تمامی کاربران سایت دانشجویان کامپیوتر
وب سایت دانشجویان کامپیوتر همیشه در تلاش بوده تا بهترین آموزش ها را برای شما کاربران عزیز فراهم کند تا شما بتوانید خیلی راحت تر برنامه نویسی کنید و از برنامه نویسی لذت ببرید.
در ادامه مباحث شیرین برنامه نویسی اندروید که تعداد زیادی در سایت قرار گرفته شده است این بار به مبحث مهم و ضروری ای می پردازیم مبحثی که شما عزیزان برای تمامی برنامه های اندرویدی خود نیاز دارید و می توانید با استفاده از این آموزش به راحتی نمودار هایی در برنامه اندرویدی خودتون طراحی کنید.
طراحی نمودار ها در برنامه های اندرویدی شاید مقداری مشکل به نظر برسد و موردی می باشد که تمامی کاربران نیاز مبرمی به این آموزش خواهند داشت.
ما در این آموزش به پیاده سازی نموداری به صورت افقی و عمودی می پردازیم.

برای پیاده سازی نمودار مراحل زیر را دنبال می کنیم.

• ابتدا باید این کتابخانه رو نصب کنید.

repositories {
	jcenter()
}

• در بخش build.gradle دستور زیر را وارد نمایید.

dependencies {
   compile 'me.ithebk:barchart:0.9'
}

• حالا برای استفاده از این کتابخانه مهم در فایل XML ای که قراره از آن استفاده کنیم به صورت زیر عمل می کنیم و تمامی امکاناتی که دارد را با هم بیان خواهیم کرد.

<me.ithebk.barchart.BarChart
  android:id="@+id/bar_chart_vertical"
  barchart:bar_type="vertical"
  barchart:bar_width="15dp"
  barchart:bar_color="@color/colorPrimary"
  barchart:bar_text_color="#808080"
  barchart:bar_text_size="10sp"
  barchart:bar_show_auto_color="false"
  barchart:bar_max_value="100"
  barchart:bar_spaces = "0dp"
  barchart:bar_show_value="true"
  barchart:bar_show_animation="true"
  android:layout_width="wrap_content"
  android:layout_height="150dp"/>

• برای دسترسی به این نمودار در محیط برنامه نویسی به صورت زیر عمل می کنیم.

BarChart barChart = (BarChart) findViewById(R.id.bar_chart_vertical);
barChart.setBarMaxValue(100);

• حالا برای اضافه کردن موارد دیگر به این نمودار باید از BarChartModel استفاده کنیم. برای مثال دستورات زیر را پیاده سازی کنید.

//Add single bar
BarChartModel barChartModel = new BarChartModel();
barChartModel.setBarValue(50);
barChartModel.setBarColor(Color.parseColor("#9C27B0"));
barChartModel.setBarTag(null); //You can set your own tag to bar model
barChartModel.setBarText("50");

barChart.addBar(barChartModel);

//Add mutliple bar at once as list;
List<BarChartModel> barChartModelList = new ArrayList<>();

//populate bar array list and add to barchart as a list. 
barChart.addBar(barChartModelList);

• برای دریافت اطلاعات این نمودار باید به روش زیر به مقادیر و اطلاعات این نمودار دسترسی پیدا کرد.

//Return value is a list of BarChartModel
barchart.getBar();

//Return value is BarChartModel at that index
barchart.getBar(index);

• برای آپدیت کردن این نمودار به راحتی می تونیم به صورت زیر عمل کنیم و اطلاعاتی که قبلا برای هر نمودار وارد کرده ایم را ویرایش کنیم.

BarChartModel barChartModelNew = new BarChartModel();
barChartModelNew.setBarValue(70);
barChartModelNew.setBarColor(Color.parseColor("#CDDC39"));
barChartModelNew.setBarTag(null);
int index = 0;
barChart.updateBar(index,barChartModelNew);

• در زمانی هم شما نیاز خواهید داشت که اطلاعات نمودار یا بخشی از آن را حذف کنید بر همین اساس این بخش برای حذف آیتم های نمودار استفاده می شود.

//To remove BarChartModel object from the list
barChart.removeBar(barChartModel);

//To remove BarChartModel object at the index from the list
barChart.removeBar(index);

• اما بخش مهم دیگری که باید در نظر بگیریم بخش مهم و کلیدیه کلیک بر روی هر آیتم از نمودار ها می باشد و طبق موارد زیر این عمل را پیاده سازی خواهیم کرد.

barChart.setOnBarClickListener(new BarChart.OnBarClickListener() {
        @Override
        public void onBarClick(BarChartModel barChartModel) {
            //Returns the bar you have clicked.
        }
    });

برای این که بهتر مفاهیم و موارد ذکر شده را متوجه شوید فیلم زیر را مشاهده نمایید.