Grafikler, kullanıcılarınıza verileri görselleştirmenin uygun ve çekici bir yolunu sağlar. Verilerin anlaşılmasını kolaylaştırabilir ve uygulamanızı daha etkileşimli hale getirebilirler.
Temel CSS veya React-Vis veya React Google Charts gibi bir kitaplık kullanmak da dahil olmak üzere React’te grafik oluşturmanın birkaç yolu vardır.
React With CSS’de Grafikler Nasıl Oluşturulur
Temel CSS kullanarak React’te grafikler oluşturmak nispeten kolaydır. Tek yapmanız gereken, genişlik ve yüksekliğe sahip bir div öğesi oluşturmak, ardından arka plan rengini grafiğin istediğiniz rengine ayarlamak. Örneğin:
import React from ‘react’;
const Chart = () => {
return (
<div style={{width: ‘100px’, height: ‘300px’, backgroundColor: ‘#5D6AFF’}}/>
);
}
export default Chart;
Yukarıdaki kodda, React kütüphanesini içe aktardık. Ardından, 100 piksel genişliğinde, 300 piksel yüksekliğinde ve #5D6AFF arka plan rengiyle bir div döndüren Chart adlı bir işlev yarattık. Bu, mavi arka plana sahip temel bir grafik oluşturacaktır. Grafikler oluşturmak için React uygulamanızda Material UI veya Tailwind CSS’yi de kullanabilirsiniz.
Daha karmaşık grafikler oluşturmak için div’lerin içinde metin veya resimler içeren birden çok grafik de oluşturabilirsiniz.
import React from ‘react’;
const Chart = () => {
return (
<div>
<div style={{width: ‘100px’, height: ‘300px’, backgroundColor: ‘#5D6AFF’}}>
<p>Chart 1</p>
</div>
<div style={{width: ‘100px’, height: ‘300px’, backgroundColor: ‘#FFCF00’}}>
<img src=”https://dummyimage.com/40×80/000/0011ff” style={{padding:’100px 30px’}} />
</div>
</div>
);
}
export default Chart;
Css kullanarak grafiklerle uygulamaya tepki verin
React-Vis Kitaplığını Kullanan React Grafikleri
React-Vis, Uber tarafından oluşturulan ve React’te tablolar ve grafikler oluşturmanıza olanak tanıyan bir kitaplıktır. Farklı şekil, renk ve boyutlarda grafikler oluşturmayı kolaylaştıran bir dizi bileşen sağlar. Grafiklerinizi daha ilgi çekici hale getirmeye yardımcı olabilecek animasyonları ve etkileşimi de destekler.
React-Vis’i kullanmak için öncelikle temel bir React uygulaması oluşturmanız ve kitaplığı yüklemeniz gerekir. Bunu aşağıdaki komutla yapabilirsiniz:
npm install react-vis
Kitaplığı yükledikten sonra, aşağıdaki kodla temel bir grafik oluşturabilirsiniz:
import React, { useState } from ‘react’;
import {
XYPlot,
LineSeries,
VerticalGridLines,
HorizontalGridLines,
XAxis,
YAxis
} from ‘react-vis’;
const Chart = () => {
const [data] = useState([
{ x: 0, y: 8 },
{ x: 1, y: 5 },
{ x: 2, y: 4 },
{ x: 3, y: 9 },
{ x: 4, y: 1 },
{ x: 5, y: 7 },
{ x: 6, y: 6 },
{ x: 7, y: 3 },
{ x: 8, y: 2 },
{ x: 9, y: 0 }
]);
return (
<XYPlot width={300} height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
);
}
export default Chart;
Yukarıdaki kod, React ve React-Vis kitaplıklarını içe aktarır. Daha sonra, VerticalGridLines, HorizontalGridLines, XAxis, YAxis ve LineSeries ile bir XYPlot döndüren Chart adlı bir işlev tanımlar. LineSeries, çizgiyi oluşturan noktaların x ve y koordinatlarını içeren veri dizisini alır.
tepki-viz kullanarak grafiklerle uygulama tepki
React Google Charts Kitaplığını Kullanma
React Google Charts, React’te grafik oluşturmayı kolaylaştıran başka bir kitaplıktır. Çubuk grafikler, pasta grafikler ve çizgi grafikler gibi farklı türde grafikler oluşturmak için bir dizi bileşen sağlar. Grafiklerinizi daha ilgi çekici hale getirmeye yardımcı olabilecek animasyonları ve etkileşimi de destekler.
React Google Charts’ı kullanmak için önce kitaplığı yüklemeniz gerekir. Bunu aşağıdaki komutla yapabilirsiniz:
npm install react-google-charts
Kitaplığı yükledikten sonra, aşağıdaki kodla temel bir grafik oluşturabilirsiniz:
import React, { useState } from ‘react’;
import { Chart } from ‘react-google-charts’;
const MyChart = () => {
const [data] = useState([
[‘Year’, ‘Sales’, ‘Expenses’],
[‘2013’, 1000, 400],
[‘2014’, 1170, 460],
[‘2015’, 660, 1120],
[‘2016’, 1030, 540]
]);
return (
<Chart
width={‘400px’}
height={‘300px’}
chartType=”Bar”
data={data}
/>
);
}
export default MyChart;
Bu kod, tepki ve tepki-google-grafik kitaplıklarını içe aktarır. Ardından, bir Grafik bileşeni döndüren MyChart adlı bir işlev oluşturur. Grafik bileşeni, grafiği oluşturan noktaların etiketlerini ve değerlerini içeren veri dizisini alır.
google-react-charts kullanarak grafiklerle uygulama tepkisi
CSS Kullanmanın Dezavantajları
React’te grafikler oluşturmak için CSS kullanmanın birkaç dezavantajı vardır:
Kullanımı zor : Karmaşık grafikler oluşturmak istiyorsanız, CSS’yi kullanmak zor olabilir.
Çok esnek değil: CSS çok esnek değildir, bu nedenle çizelgelerinizde değişiklik yapmak zor olabilir.
Etkileşimli değil: CSS çizelgeleri etkileşimli değildir, dolayısıyla kullanıcılarınız onlarla etkileşim kuramaz.
Karmaşık grafikler oluşturmak istiyorsanız, React-vis ve React-google-charts daha iyi seçeneklerdir. Ancak basit grafikler oluşturmak istiyorsanız CSS iyi bir seçenek olabilir.
React-Vis Kullanmanın Faydaları
React’te grafikler oluşturmak için React-Vis kullanmanın çeşitli avantajları vardır:
Kullanımı kolay: React-Vis’in kullanımı kolaydır, böylece kolaylıkla karmaşık grafikler oluşturabilirsiniz.
Son derece esnek: React-Vis oldukça esnektir, böylece çizelgelerinizde kolayca değişiklik yapabilirsiniz.
Etkileşimli: React-Vis çizelgeleri etkileşimlidir, böylece kullanıcılarınız onlarla etkileşim kurabilir.
Animasyonlu: React-Vis çizelgeleri animasyonları destekler, böylece çizelgelerinizi daha ilgi çekici hale getirebilirsiniz.
Etkileşimli ve animasyonlu karmaşık grafikler oluşturmak istiyorsanız React-Vis iyi bir seçimdir.
React Google Grafiklerini Kullanmanın Yararları
Tıpkı React-Vis gibi, React’te grafikler oluşturmak için React Google Charts kullanmanın çeşitli avantajları vardır:
Kullanımı kolay: React Google Charts’ın kullanımı kolaydır, böylece kolaylıkla karmaşık grafikler oluşturabilirsiniz.
Farklı grafik türleri: React Google Charts farklı grafik türleri sağlar, böylece verileriniz için en iyisini seçebilirsiniz.
Animasyon desteği: React Google Charts animasyonları destekler, böylece grafiklerinizi daha ilgi çekici hale getirebilirsiniz.
Grafiklerle Kullanıcı Etkileşimini Artırın
Grafikler, verileri görselleştirmenin harika bir yoludur, ancak bunları kullanıcı katılımını artırmak için de kullanabilirsiniz. Grafiklerinize animasyonlar ve etkileşim eklemek, onları daha ilgi çekici hale getirebilir ve kullanıcılarınızın verilerinizi daha iyi anlamasına yardımcı olabilir.
Bu nedenle, React uygulamanızda kullanıcı katılımını artırmanın bir yolunu arıyorsanız, grafikler eklemeyi düşünün. React uygulamanızı Github gibi hızlı, güvenli ve ölçeklenebilir bir platforma da dağıtabilirsiniz.