Recharts ile ReactJS\u2019de Grafik Olu\u015fturma: Kapsaml\u0131 Bir Rehber<\/p>\n
ReactJS uygulamalar\u0131n\u0131za g\u00f6rsel \u00e7ekicilik ve veri g\u00f6rselle\u015ftirme g\u00fcc\u00fc kazand\u0131rmak i\u00e7in Recharts, m\u00fckemmel bir \u00e7\u00f6z\u00fcm sunar. Bu kapsaml\u0131 rehberde, Recharts k\u00fct\u00fcphanesini kullanarak \u00e7e\u015fitli grafik t\u00fcrlerini olu\u015fturma, \u00f6zelle\u015ftirme ve etkile\u015fimli hale getirme ad\u0131mlar\u0131n\u0131 ele alaca\u011f\u0131z. Recharts ile, verilerinizi g\u00f6rsel olarak anlaml\u0131 hale getirerek karma\u015f\u0131k bilgileri daha kolay kavrayabilir ve uygulamalar\u0131n\u0131za daha g\u00fc\u00e7l\u00fc bir i\u00e7g\u00f6r\u00fc kazand\u0131rabilirsiniz.<\/p>\n
Recharts, ReactJS i\u00e7in bir grafik k\u00fct\u00fcphanesidir. Basit ve kullan\u0131m\u0131 kolay bir API ile, \u00e7e\u015fitli grafik t\u00fcrlerini olu\u015fturman\u0131za, \u00f6zelle\u015ftirmenize ve etkile\u015fimli hale getirmenize olanak tan\u0131r. Recharts, SVG tabanl\u0131d\u0131r, bu da grafiklerin y\u00fcksek kaliteli ve y\u00fcksek performansl\u0131 olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, Recharts, veri g\u00f6rselle\u015ftirme i\u015flemini kolayla\u015ft\u0131rmak i\u00e7in \u00e7e\u015fitli \u00f6zelle\u015ftirme se\u00e7enekleri ve bile\u015fenler sunar.<\/p>\n
Recharts\u2019i projelerinize entegre etmek olduk\u00e7a kolayd\u0131r. \u0130lk olarak, npm veya yarn paket y\u00f6neticisini kullanarak Recharts\u2019i kurmal\u0131s\u0131n\u0131z:<\/p>\n
“`bash
\nnpm install recharts
\n“`<\/p>\n
Kurulum tamamland\u0131ktan sonra, Recharts bile\u015fenlerini React bile\u015fenlerinizde kullanabilirsiniz.<\/p>\n
Recharts, \u00e7e\u015fitli temel grafik t\u00fcrlerini olu\u015fturmak i\u00e7in \u00f6nceden haz\u0131rlanm\u0131\u015f bile\u015fenler sunar. \u0130\u015fte en yayg\u0131n kullan\u0131lan birka\u00e7 grafik t\u00fcr\u00fc:<\/p>\n
\u00c7izgi grafikleri, zaman i\u00e7indeki trendleri veya verilerin de\u011fi\u015fimini g\u00f6stermek i\u00e7in idealdir. Recharts, “`javascript const data = [ function SimpleLineChart() { export default SimpleLineChart; \u00c7ubuk grafikleri, kategorik verileri kar\u015f\u0131la\u015ft\u0131rarak g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. Recharts, “`javascript const data = [ function SimpleBarChart() { export default SimpleBarChart; Pasta grafikleri, bir b\u00fct\u00fcn\u00fcn par\u00e7alar\u0131n\u0131 g\u00f6stermek i\u00e7in kullan\u0131l\u0131r. Recharts, “`javascript const data = [ const COLORS = [‘#0088FE’, ‘#00C49F’, ‘#FFBB28’, ‘#FF8042’];<\/p>\n function SimplePieChart() { export default SimplePieChart; Recharts, grafiklerinizi \u00f6zelle\u015ftirmek i\u00e7in \u00e7ok say\u0131da se\u00e7enek sunar. Grafik t\u00fcr\u00fcn\u00fc, renkleri, boyutlar\u0131, eksenleri, ara\u00e7 ipu\u00e7lar\u0131n\u0131 ve daha fazlas\u0131n\u0131 \u00f6zelle\u015ftirebilirsiniz.<\/p>\n Grafik \u00f6\u011felerinin renklerini, “`javascript Grafikin geni\u015fli\u011fini ve y\u00fcksekli\u011fini, “`javascript Eksenleri, “`javascript Ara\u00e7 ipu\u00e7lar\u0131n\u0131, “`javascript Efsaneleri, “`javascript Recharts, etkile\u015fimli grafikler olu\u015fturman\u0131za olanak tan\u0131r. Grafikler \u00fczerinde fare olaylar\u0131n\u0131 kullanarak, verileri vurgulanmas\u0131, yak\u0131nla\u015ft\u0131rma\/uzakla\u015ft\u0131rma ve daha fazlas\u0131 gibi i\u015flemler yapabilirsiniz.<\/p>\n Recharts, “`javascript Recharts, “`javascript Recharts, temel grafik t\u00fcrlerinin \u00f6tesinde, daha geli\u015fmi\u015f grafik t\u00fcrlerini olu\u015fturman\u0131za olanak tan\u0131r. Bu grafik t\u00fcrleri aras\u0131nda:<\/p>\n Alan grafikleri, \u00e7izgi grafiklerine benzer, ancak \u00e7izginin alt\u0131ndaki alan\u0131 doldurur.<\/p>\n “`javascript Da\u011f\u0131l\u0131m grafikleri, iki de\u011fi\u015fken aras\u0131ndaki ili\u015fkiyi g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/p>\n “`javascript Radar grafikleri, birden fazla de\u011fi\u015fkeni g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/p>\n “`javascript const data = [ const COLORS = [‘#0088FE’, ‘#00C49F’, ‘#FFBB28’];<\/p>\n function SimpleRadarChart() { export default SimpleRadarChart; Recharts\u2019i kullanarak bir basit \u00e7izgi grafi\u011fi olu\u015fturan bir \u00f6rnek uygulama olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar\u0131 izleyebilirsiniz:<\/p>\n 1. **Recharts\u2019i Kurun:** 2. **Bir React Bile\u015feni Olu\u015fturun:** const data = [LineChart<\/code> bile\u015fenini kullanarak \u00e7izgi grafikleri olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n
\nimport React from ‘react’;
\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from ‘recharts’;<\/p>\n
\n { name: ‘Pazartesi’, uv: 4000, pv: 2400, amt: 2400 },
\n { name: ‘Sal\u0131’, uv: 3000, pv: 1398, amt: 2210 },
\n { name: ‘\u00c7ar\u015famba’, uv: 2000, pv: 9800, amt: 2290 },
\n { name: ‘Per\u015fembe’, uv: 2780, pv: 3908, amt: 2000 },
\n { name: ‘Cuma’, uv: 1890, pv: 4800, amt: 2181 },
\n { name: ‘Cumartesi’, uv: 2390, pv: 3800, amt: 2500 },
\n { name: ‘Pazar’, uv: 3490, pv: 4300, amt: 2100 },
\n];<\/p>\n
\n return (
\n
\n
\n
\n
\n
\n
\n
\n <\/LineChart>
\n );
\n}<\/p>\n
\n“`<\/p>\n\u00c7ubuk Grafi\u011fi<\/h3>\n
BarChart<\/code> bile\u015fenini kullanarak \u00e7ubuk grafikleri olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n
\nimport React from ‘react’;
\nimport { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from ‘recharts’;<\/p>\n
\n { name: ‘Page A’, uv: 4000, pv: 2400, amt: 2400 },
\n { name: ‘Page B’, uv: 3000, pv: 1398, amt: 2210 },
\n { name: ‘Page C’, uv: 2000, pv: 9800, amt: 2290 },
\n { name: ‘Page D’, uv: 2780, pv: 3908, amt: 2000 },
\n { name: ‘Page E’, uv: 1890, pv: 4800, amt: 2181 },
\n { name: ‘Page F’, uv: 2390, pv: 3800, amt: 2500 },
\n { name: ‘Page G’, uv: 3490, pv: 4300, amt: 2100 },
\n];<\/p>\n
\n return (
\n
\n
\n
\n
\n
\n
\n
\n <\/BarChart>
\n );
\n}<\/p>\n
\n“`<\/p>\nPasta Grafi\u011fi<\/h3>\n
PieChart<\/code> bile\u015fenini kullanarak pasta grafikleri olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n
\nimport React from ‘react’;
\nimport { PieChart, Pie, Sector, Cell, Tooltip } from ‘recharts’;<\/p>\n
\n { name: ‘Group A’, value: 400 },
\n { name: ‘Group B’, value: 300 },
\n { name: ‘Group C’, value: 300 },
\n { name: ‘Group D’, value: 200 },
\n];<\/p>\n
\n return (
\n
\n
\n {data.map((entry, index) => (
\n
\n ))}
\n <\/Pie>
\n
\n <\/PieChart>
\n );
\n}<\/p>\n
\n“`<\/p>\nGrafik \u00d6zelle\u015ftirme<\/h2>\n
Renkler<\/h3>\n
fill<\/code>, stroke<\/code> ve stroke-width<\/code> gibi \u00f6zellikler kullanarak \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
\n
\n
\n
\n“`<\/p>\nBoyutlar<\/h3>\n
width<\/code> ve height<\/code> \u00f6zelliklerinden kullanarak ayarlayabilirsiniz.<\/p>\n
\n
\n“`<\/p>\nEksenler<\/h3>\n
XAxis<\/code> ve YAxis<\/code> bile\u015fenlerini kullanarak \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
\n
\n
\n“`<\/p>\nAra\u00e7 \u0130pu\u00e7lar\u0131<\/h3>\n
Tooltip<\/code> bile\u015fenini kullanarak \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
\n
\n“`<\/p>\nEfsaneler<\/h3>\n
Legend<\/code> bile\u015fenini kullanarak \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
\n
\n“`<\/p>\nEtkile\u015fimli Grafikler<\/h2>\n
Fare Olaylar\u0131<\/h3>\n
onMouseEnter<\/code>, onMouseLeave<\/code>, onClick<\/code> gibi fare olaylar\u0131n\u0131 destekler.<\/p>\n
\n
\n onMouseLeave={(e) => console.log(‘Mouse left the line’, e)}
\n onClick={(e) => console.log(‘Line clicked’, e)}
\n\/>
\n“`<\/p>\nYak\u0131nla\u015ft\u0131rma\/Uzakla\u015ft\u0131rma<\/h3>\n
Zoom<\/code> bile\u015fenini kullanarak grafikleri yak\u0131nla\u015ft\u0131rma\/uzakla\u015ft\u0131rma i\u015flemlerine olanak tan\u0131r.<\/p>\n
\nimport { Zoom } from ‘recharts’;<\/p>\n
\n
\n<\/LineChart>
\n“`<\/p>\nGeli\u015fmi\u015f Grafik T\u00fcrleri<\/h2>\n
Alan Grafi\u011fi<\/h3>\n
\nimport { AreaChart, Area } from ‘recharts’;<\/p>\n
\n
\n
\n
\n
\n
\n<\/AreaChart>
\n“`<\/p>\nDa\u011f\u0131l\u0131m Grafi\u011fi<\/h3>\n
\nimport { ScatterChart, Scatter } from ‘recharts’;<\/p>\n
\n
\n
\n
\n
\n
\n<\/ScatterChart>
\n“`<\/p>\nRadar Grafi\u011fi<\/h3>\n
\nimport { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Legend } from ‘recharts’;<\/p>\n
\n { subject: ‘Math’, A: 120, B: 110, fullMark: 150 },
\n { subject: ‘Physics’, A: 98, B: 130, fullMark: 150 },
\n { subject: ‘Chemistry’, A: 86, B: 130, fullMark: 150 },
\n];<\/p>\n
\n return (
\n
\n
\n
\n
\n
\n
\n
\n <\/RadarChart>
\n );
\n}<\/p>\n
\n“`<\/p>\n\u00d6rnek Uygulama<\/h2>\n
\n“`bash
\nnpm install recharts
\n“`<\/p>\n
\n“`javascript
\nimport React from ‘react’;
\nimport { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from ‘recharts’;<\/p>\n
\n { name: ‘Pazartesi’, uv: 4000, pv: 2400, amt: 2400 },
\n { name: ‘Sal\u0131’, uv: 3000, pv: 1398, amt: 2210 },
\n { name: ‘\u00c7ar\u015famba’, uv: 2000, pv: 9800, amt: 2290 },
\n { name: ‘Per\u015fembe’, uv: 2780, pv: 3908, amt: 2000 },
\n { name: ‘Cuma’, uv: 1890, pv: 4800, amt: 2181 },
\n { name: ‘Cumartesi’, uv: 2390, pv: 3800, amt: 2500 },
\n { name: ‘Pazar’, uv: 3490, pv: 4300, amt: 2100 },
\n];<\/p>\n