CSS ile Grafik Olu\u015fturma: Basitten \u0130leri Seviyeye<\/p>\n
Merhaba! Fatih Soysal olarak, bug\u00fcn sizlerle CSS kullanarak grafik olu\u015fturman\u0131n \u00e7e\u015fitli yollar\u0131n\u0131 ke\u015ffedece\u011fiz. Web sayfalar\u0131n\u0131za g\u00f6rsellik katmak ve verileri etkileyici bir \u015fekilde sunmak i\u00e7in CSS’in sundu\u011fu g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131 kullanaca\u011f\u0131z. Bu y\u00f6ntemler, JavaScript k\u00fct\u00fcphanelerine ihtiya\u00e7 duymadan, sadece CSS ile \u00e7al\u0131\u015fmay\u0131 sa\u011flayacak. \u00d6ncelikle, basit grafiklerle ba\u015flay\u0131p daha sonra daha karma\u015f\u0131k \u00f6rneklerle devam edece\u011fiz.<\/p>\n
En basit grafiklerden biri olan bar grafi\u011fi, CSS kullanarak kolayca olu\u015fturulabilir. A\u015fa\u011f\u0131da, temel bir bar grafi\u011fi \u00f6rne\u011fi ve a\u00e7\u0131klamas\u0131 bulunmaktad\u0131r:<\/p>\n
\n.bar-graph {\n display: flex;\n}\n\n.bar {\n width: 50px; \/* Her bir bar\u0131n geni\u015fli\u011fi *\/\n height: 100px; \/* Bar y\u00fcksekli\u011fi, veriye g\u00f6re de\u011fi\u015fecek *\/\n background-color: #4CAF50; \/* Bar rengi *\/\n margin: 5px;\n}\n\n.bar-1 { height: 20px; } \/*Verilere g\u00f6re y\u00fckseklik ayarlan\u0131yor*\/\n.bar-2 { height: 80px; }\n.bar-3 { height: 50px; }\n\n<\/code><\/pre>\nBu kod, \u00fc\u00e7 farkl\u0131 y\u00fckseklikte bara sahip basit bir bar grafi\u011fi olu\u015fturur. Her bir bar\u0131n y\u00fcksekli\u011fi, g\u00f6sterilecek veriye g\u00f6re ayarlanabilir. Daha fazla bar eklemek i\u00e7in, .bar s\u0131n\u0131f\u0131na sahip yeni elemanlar ekleyip y\u00fckseklik de\u011ferlerini g\u00fcncellemeniz yeterlidir. Ayr\u0131ca renkleri ve stillemeyi \u00f6zelle\u015ftirebilirsiniz. Bu basit \u00f6rnek, CSS ile neler yap\u0131labilece\u011fini g\u00f6stermek i\u00e7in iyi bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Elbette, daha geli\u015fmi\u015f grafikler i\u00e7in daha karma\u015f\u0131k CSS teknikleri kullanman\u0131z gerekebilir.<\/p>\n
Daire Grafikleri (Pie Chart)<\/h2>\n
Daire grafikleri, verilerin oranlar\u0131n\u0131 g\u00f6rsel olarak g\u00f6stermek i\u00e7in idealdir. CSS ile daire grafikleri olu\u015fturmak, bar grafiklerine g\u00f6re biraz daha karma\u015f\u0131kt\u0131r. Bununla birlikte, border-radius ve transform \u00f6zelliklerini kullanarak yarat\u0131c\u0131 \u00e7\u00f6z\u00fcmler bulabiliriz. Ancak, \u00e7ok karma\u015f\u0131k daire grafikleri i\u00e7in, bir CSS k\u00fct\u00fcphanesi veya JavaScript kullanmak daha pratik olabilir. Burada \u00f6nemli olan, projenizin ihtiya\u00e7lar\u0131na g\u00f6re en uygun y\u00f6ntemi se\u00e7mektir.<\/p>\n
\u00d6rne\u011fin, basit bir daire grafi\u011fi olu\u015fturmak i\u00e7in, border-radius: 50%; \u00f6zelli\u011fini kullanarak bir daire olu\u015fturabilir ve sonra background-color \u00f6zelli\u011fiyle bir dilimi doldurabilirsiniz. Daha karma\u015f\u0131k grafikler i\u00e7in, CSS’in clip-path \u00f6zelli\u011fini kullanabilirsiniz. B\u00f6ylece daire grafi\u011fini daha iyi kontrol edebilirsiniz. <\/p>\n
\u0130leri Seviye Teknikler ve K\u00fct\u00fcphaneler<\/h2>\n
Daha karma\u015f\u0131k ve etkile\u015fimli grafikler i\u00e7in, CSS’in s\u0131n\u0131rlar\u0131n\u0131 zorlamamak daha iyidir. Bu noktada, JavaScript k\u00fct\u00fcphaneleri devreye giriyor. Chart.js, D3.js gibi pop\u00fcler k\u00fct\u00fcphaneler, \u00e7e\u015fitli grafik t\u00fcrlerini kolayca olu\u015fturman\u0131za ve \u00f6zelle\u015ftirmenize olanak tan\u0131r. Bu k\u00fct\u00fcphaneler, JavaScript becerilerinizi geli\u015ftirmenize ve daha etkileyici grafikler olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r. Ancak unutmay\u0131n ki, basit ihtiya\u00e7lar i\u00e7in CSS’in yeterince g\u00fc\u00e7l\u00fc oldu\u011funu bilmek \u00f6nemlidir.<\/p>\n