React Native Grafik – Line Chart

tarihinde gönderilmiş tarafından

React native ile uygulama geliştirdiğiniz projenizde Chart – Grafik ekleme işleminden bahsetmek istiyorum.

Hepsi için olduğu gibi bu işlem içinde kolay kullanımlı bir kütüphane mevcut ve bu kütüphane ile kolayca grafikli data grafiği ekleyebilirsiniz.

Kütüphaneyi kullanmadan önce projemize install gerçekleştiriyoruz.

 
  sudo npm install react-native-svg-charts --save

kütüphaneyi projemize eklediğimize göre sıra bunu projede ilgili sayfaya import etmekte , import işlemi için iki component import ediyoruz bunlardan birisi grafik çizen component bir diğeride bu grafiğin arkasında gözüken birbirine paralel yatay çizgiler ,Yatay çizgilere ait component Grid , Grafiği çize component ise LineChart .

 
  import { LineChart, Grid } from 'react-native-svg-charts'

import tan sonra render methodu içerisine artık çizim grafiğini ekleyebiliriz.

<LineChart
                    style={{ height: 250 }}
                    data={this.state.data}
                    svg={{ stroke: 'rgb(255, 255, 255)' }}
                    contentInset={{ top: 20, bottom: 20 }}
                >
                    <Grid />
                </LineChart>

burada dikkat etmemiz gereken husus data olarak alınan değerin float-int olarak tek dizi elemanı olmasıdır örnek verelim ;

 
constructor(props){
    super(props)
    this.state={
        data:[15,23,12,9,6,7,8,11]
    }
}

buradaki sıralamamıza göre grafikte noktalar belirlenip componentimiz bunların arasında çizgilerini çekecek ve grafiğimiz hazır..