Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

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:

içe aktarmak Tepki itibaren'tepki';
sabit Grafik = () => {
geri dönmek (


Genişlik: "100 piksel", yükseklik: "300 piksel", arka plan rengi: "#5D6AFF"}}/>
 );
}
ihracatvarsayılan Çizelge;

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. ayrıca yapabilirsin

instagram viewer
Materyal kullanıcı arayüzünü kullan veya React uygulamanızda Tailwind CSS grafikler oluşturmak için.

Daha karmaşık grafikler oluşturmak için div'lerin içinde metin veya resimler içeren birden çok grafik de oluşturabilirsiniz.

içe aktarmak Tepki itibaren'tepki';
sabit Grafik = () => {
geri dönmek (
<div>


Genişlik: "100 piksel", yükseklik: "300 piksel", arka plan rengi: "#5D6AFF"}}>
<P>Grafik 1P>
div>
Genişlik: "100 piksel", yükseklik: "300 piksel", arka plan rengi: "#FFCF00"}}>
<imgkaynak=" https://dummyimage.com/40x80/000/0011ff"stil={{dolgu malzemesi:'100 piksel30 piksel'}} />
div>
div>
 );
}


ihracatvarsayılan Çizelge;

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 önce temel bir React uygulaması oluşturun ve kütüphaneyi kurun. Bunu aşağıdaki komutla yapabilirsiniz:

npm düzenlemek tepki verme

Kitaplığı yükledikten sonra, aşağıdaki kodla temel bir grafik oluşturabilirsiniz:

içe aktarmak Tepki, { useState } itibaren'tepki';
içe aktarmak {
 XYPlot,
 çizgi Serisi,
 Dikey Izgara Çizgileri,
 Yatay Izgara Çizgileri,
 X Ekseni,
 Y Ekseni
} itibaren"tepki";


sabit Grafik = () => {
sabit [veri] = kullanımDevlet([
 { 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 }
 ]);


geri dönmek (
<XYPlotGenişlik={300}yükseklik={300}>
<Dikey Izgara Çizgileri />
<Yatay Izgara Çizgileri />
<X Ekseni />
<Y Ekseni />
<Çizgi Serisiveri={veri} />
XYPlot>
 );
}
ihracatvarsayılan Çizelge;

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.

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 düzenlemek tepki-google-grafikleri

Kitaplığı yükledikten sonra, aşağıdaki kodla temel bir grafik oluşturabilirsiniz:

içe aktarmak Tepki, { useState } itibaren'tepki';
içe aktarmak { Çizelge } itibaren"react-google-charts";
sabit Grafikim = () => {
sabit [veri] = kullanımDevlet([
['Yıl', 'Satış', 'Masraflar'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
 ]);


geri dönmek (
 genişlik={"400 piksel"}
 yükseklik={"300 piksel"}
 chartType="Çubuk"
 veri={veri}
 />
 );
}
ihracatvarsayılan Grafikim;

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.

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 grafikleri etkileşimli değildir, bu nedenle 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 grafikleri 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, grafiklerinizi daha ilgi çekici hale getirebilmeniz için animasyonları destekler.

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.