نمودار ها در کاتلین | آموزش کار با نمودار خطی در کاتلین

نمودار ها در کاتلین چه استفاده ایی دارد ؟

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

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

آموزش ساخت نمودار خطی

من قصد دارم آموزش کار با نمودار ها در کاتلین از سری آموزش کاتلین  را مانند سایر آموزش ها با انجام پروژه کوچک برای شما نشان دهم . تا بهتر بتونین درک بکنین .شما برای شروع کار اول یک پروژه اندرویدی ایجاد کنید و اسم دلخواه ای روی آن قرار دهید . بعد ایجاد پروژه ما باید کتابخانه MPAndroidChart را به پروژه خودمون اضافه کنیم .برای این کار کد زیر را به قسمت  (module)build.gradle   و بخش dependencie پروژه خودتون اضافه کنید .

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

و همچنین در قسمت (Project)build.gradle  خود کد زیر را وارد سازید .

repositories {
    maven { url 'https://jitpack.io' }
}

حالا ما باید در Layout پروژه خودمون کد های زیر را وارد کنیم تا ظاهر نمودار ما ایجاد گردد.

activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="نمودار خطی در کاتلین"
        android:textColor="#750909"
        android:textSize="18dp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="450dp"
        android:background="@drawable/mygradient_file"
        android:orientation="vertical">


        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/Id_LineChart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:padding="8dp" />

    </LinearLayout>
</LinearLayout>

در اینجا من یک نمودار خطی را به یک طرح خطی اضافه کردم تا ارتفاع نمودار را محدود کرده و با سایر طرح بندی ها سازگار شود ، اما شما می توانید از طرح بندی های دیگر نیز استفاده کنید! .  و یک فایل گرادیان ایجاد می کنیم تا نحوی رنگ بندی صفحه نمودارمون را اضافه کنیم . ابتدا وارد پوشه drawable شوید و یک فایل گرادیان به نام  mygradient_file.xml درست کنید . وکد های زیر را در آن قسمت وارد سازید .

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:startColor="#D6D1D3"
                android:endColor="#B53F57"
                android:angle="180"/>
        </shape>
    </item>
</selector>

رنگ بندی بالا به سلیقه شما بستگی دارد و هر آنگونه که دوست دارید تغیر دهید . حالا ما باید کد های لازم برای مقدار دهی به نمودار ها در کاتلین را به پروژه خودمون اضافه کنیم . و من قصد دارم کد های این بخش را قسمت به قسمت خدمت شما عزیزای دل توضیح بدم تا بهتر درک کنید . کد کلی مانند کد زیر می باشد که شما باید در mainActivity خود اضافه کنید .

package com.example.kotlinme

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.github.mikephil.charting.charts.LineChart
import com.github.mikephil.charting.data.Entry
import com.github.mikephil.charting.data.LineData
import com.github.mikephil.charting.data.LineDataSet

class MainActivity2 : AppCompatActivity() {
    private lateinit var MyChart: LineChart
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        MyChart = findViewById(R.id.Id_LineChart)
        val Val_entries = ArrayList<Entry>()
//        بخش دوم کد ها
        Val_entries.add(Entry(1f, 22f))
        Val_entries.add(Entry(2f, 17f))
        Val_entries.add(Entry(3f, 6f))
        Val_entries.add(Entry(4f, 4f))
        Val_entries.add(Entry(5f, 17f))
        Val_entries.add(Entry(8f, 19f))
        Val_entries.add(Entry(4f, 2f))
//        بخش سوم کد ها
        val line = LineDataSet(Val_entries, "نوع ")

//        بخش چهارم کد ها
        line.setDrawValues(true)
        line.setDrawFilled(true)
        line.lineWidth = 2f
        line.fillAlpha = R.color.material_on_background_emphasis_medium
        line.fillColor = R.color.design_default_color_secondary

//        بخش پنجم کد ها

        MyChart.xAxis.labelRotationAngle = 0f

//        بخش ششم کد ها
        MyChart.data = LineData(line)

//        بخش هفتم کد ها
        MyChart.axisRight.isEnabled = false

//        بخش هشتم کد ها
        MyChart.setTouchEnabled(true)
        MyChart.setPinchZoom(true)

//        بخش نهم کد ها
        MyChart.description.text = "روز"
        MyChart.setNoDataText("خطایی رخ داده است !")


    }
}

 توضیحات بخش های مختلف کد نمودار  

بخش اول و دوم :

//        بخش دوم کد ها
        Val_entries.add(Entry(1f, 22f))
        Val_entries.add(Entry(2f, 17f))
        Val_entries.add(Entry(3f, 6f))
        Val_entries.add(Entry(4f, 4f))
        Val_entries.add(Entry(5f, 17f))
        Val_entries.add(Entry(8f, 19f))
        Val_entries.add(Entry(4f, 2f))

در اینجا ما فیلد های خود را به سادگی مقدار دهی می کنیم .و نکته دیگر این است که Data  های ما باید شامل مقادیر شناور باشد. 

بخش سوم:

//        بخش سوم کد ها
        val line = LineDataSet(Val_entries, "type)

ما لیست خود را به LineDataSet اختصاص می دهیم و برچسب گذاری می کنیم.

بخش چهارم :

//        بخش چهارم کد ها
        line.setDrawValues(true)
        line.setDrawFilled(true)
        line.lineWidth = 2f
        line.fillAlpha = R.color.material_on_background_emphasis_medium
        line.fillColor = R.color.design_default_color_secondary

مقادیر draw را روی false قرار می دهم زیرا در هر نقطه مقدار مربوطه را در نمودار نشان می دهد و در دراز مدت ، نامرتب خواهد بود.  در کد بالا من عرض خط نمودار خود را تنظیم می کنم و رنگ پر شده را انتخاب می کنم. می توانید آنها را جداگانه امتحان کنید تا ببینید چگونه نمودار خط شما با هر کد تغییر می کند.

بخش پنجم :

//        بخش پنجم کد ها
        MyChart.xAxis.labelRotationAngle = 0f

زاویه چرخش برچسب را روی محور x تنظیم کردم. این زاویه را برای ترسیم برچسب های محور X (بر حسب درجه) اساساً تنظیم می کند. 

بخش ششم :

//        بخش ششم کد ها
        MyChart.data = LineData(line)

مجموعه Data های خود را به نمودار خطی برای ترسیم  نمودار اختصاص می دهم.

بخش هفتم :

//        بخش هفتم کد ها
        MyChart.axisRight.isEnabled = false

اگر می خواهیم آخرین مقدار را نشان دهیم ، شما همچنین باید یک حاشیه کوچک در محدوده محور خود اضافه کنید. اگر این کار را نکنید ، آخرین مقدار در نمودار نشان داده نمی شود. به این ترتیب ، اکنون می توانید تمام مقادیر موجود در مجموعه داده خود را کنترل کنید.

بخش هشتم :

//        بخش هشتم کد ها
        MyChart.setTouchEnabled(true)
        MyChart.setPinchZoom(true)

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

بخش نهم :

//        بخش نهم کد ها
        MyChart.description.text = "روز"
        MyChart.setNoDataText("خطایی رخ داده است !")

هنگامی که مجموعه مقادیر شما خراب می شود و می خواهید به صفحه خود بنویسید که چیزی “اشتباه رخ داده است” ، می توانید آن را به پروژه خود اضافه کنید. توضیحات برای خوانندگان خوب است که بفهمند

،ما می توانیم  بعد اینکه داده های ما در نمودارمون بارگذاری شد برای جلو بهتر از انیمیشن را برای نمایش استفاده کنیم . انیمیشن ها فقط برای API 11 و بالاتر کار می کنند و همه انواع نمودارها در کاتلین از انیمیشن ها پشتیبانی می کنند. سه نوع مختلف انیمیشن وجود دارد:

1. animateX(miliseconds) : مقادیر نمودارها را در محور افقی ، از چپ به راست متحرک می کند.
2. animateY(miliseconds) :مقادیر نمودارها را در محور ، از پایین به بالا متحرک می کند.
3. animateXY(miliseconds,miliseconds) :مقادیر نمودارها را در محور افقی و عمودی متحرک می کند.

و در پایان خروجی ما به شکل زیر می باشد .

آموزش ساخت یک نمودار در کاتلین

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

موفق باشید .