{"id":33652,"date":"2025-11-05T14:01:20","date_gmt":"2025-11-05T11:01:20","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/"},"modified":"2025-11-05T14:01:20","modified_gmt":"2025-11-05T11:01:20","slug":"canvasjs-grafiklerine-ozel-baglam-menusu-ekleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/","title":{"rendered":"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme"},"content":{"rendered":"<p><body><\/p>\n<p>CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.<\/p>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn veri odakl\u0131 d\u00fcnyas\u0131nda, web uygulamalar\u0131 arac\u0131l\u0131\u011f\u0131yla sundu\u011fumuz grafikler ve g\u00f6rselle\u015ftirmeler, kullan\u0131c\u0131lar\u0131n kritik kararlar almas\u0131na yard\u0131mc\u0131 olan temel ara\u00e7lard\u0131r. Ancak, varsay\u0131lan bir CanvasJS grafi\u011fi, pasif bir g\u00f6r\u00fcnt\u00fcden \u00f6teye gitmeyebilir. Kullan\u0131c\u0131lar\u0131n verilerle daha derinlemesine etkile\u015fim kurmas\u0131n\u0131, belirli eylemleri h\u0131zla ger\u00e7ekle\u015ftirmesini veya verileri kendi ihtiya\u00e7lar\u0131na g\u00f6re \u00f6zelle\u015ftirmesini sa\u011flayan mekanizmalar genellikle eksiktir. \u0130\u015fte tam da bu noktada \u00f6zel ba\u011flam men\u00fcleri devreye girer.<\/p>\n<p>Taray\u0131c\u0131lar\u0131n sundu\u011fu standart sa\u011f t\u0131klama men\u00fcleri, genellikle kopyalama, yap\u0131\u015ft\u0131rma, sayfa kayna\u011f\u0131n\u0131 g\u00f6r\u00fcnt\u00fcleme gibi genel i\u015flevler sunar ve bu i\u015flevler, bir veri g\u00f6rselle\u015ftirme ba\u011flam\u0131nda \u00e7o\u011fu zaman anlams\u0131zd\u0131r. Kullan\u0131c\u0131lar\u0131n bir grafi\u011fin belirli bir noktas\u0131na sa\u011f t\u0131klad\u0131\u011f\u0131nda &#8220;Veriyi CSV olarak \u0130ndir&#8221;, &#8220;Bu Ay\u0131 Filtrele&#8221;, &#8220;Ayr\u0131nt\u0131lar\u0131 G\u00f6r\u00fcnt\u00fcle&#8221; veya &#8220;Grafik Tipini De\u011fi\u015ftir&#8221; gibi ba\u011flama \u00f6zel eylemleri g\u00f6rmesi, hem kullan\u0131c\u0131 deneyimini (UX) \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir hem de uygulaman\u0131z\u0131n i\u015flevselli\u011fini art\u0131r\u0131r. Bu \u00f6zelle\u015ftirilmi\u015f men\u00fcler, kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 daha sezgisel ve verimli bir \u015fekilde kullanmas\u0131na olanak tan\u0131r.<\/p>\n<p>\u00d6zellikle i\u015f zekas\u0131 (BI) panelleri, finans uygulamalar\u0131 veya veri analiz platformlar\u0131 gibi yo\u011fun veri kullan\u0131m\u0131 olan alanlarda, kullan\u0131c\u0131lar\u0131n her eylem i\u00e7in men\u00fclerde gezinmek yerine, ilgili grafik \u00f6\u011fesi \u00fczerinde do\u011frudan eylem tetikleyebilmesi b\u00fcy\u00fck zaman kazanc\u0131 sa\u011flar. Bu, uygulaman\u0131z\u0131n daha profesyonel ve modern g\u00f6r\u00fcnmesini sa\u011flamakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n verilerle \u00e7al\u0131\u015fma bi\u00e7imini d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. \u00d6rne\u011fin, bir hisse senedi grafi\u011finde belirli bir bara sa\u011f t\u0131klayarak o g\u00fcnk\u00fc haberleri an\u0131nda g\u00f6r\u00fcnt\u00fclemek veya bir sat\u0131\u015f grafi\u011finde bir \u00e7ubu\u011fa t\u0131klay\u0131p o b\u00f6lgedeki sat\u0131\u015f temsilcilerinin performans\u0131n\u0131 listelemek gibi senaryolar, \u00f6zel ba\u011flam men\u00fcleri ile kolayca hayata ge\u00e7irilebilir. Ayr\u0131ca, bu men\u00fclerin tamamen sizin kontrol\u00fcn\u00fczde olmas\u0131, markan\u0131z\u0131n esteti\u011fine ve uygulaman\u0131z\u0131n genel tasar\u0131m diline uygun bir g\u00f6r\u00fcn\u00fcm sunman\u0131z\u0131 sa\u011flar. Bu b\u00f6l\u00fcmde ele ald\u0131\u011f\u0131m\u0131z gibi, \u00f6zel ba\u011flam men\u00fcleri sadece estetik bir eklenti de\u011fil, ayn\u0131 zamanda interaktif veri g\u00f6rselle\u015ftirmenin temel bir par\u00e7as\u0131d\u0131r.<\/p>\n<aside class=\"expert-tip\">\n    Uzman \u0130pucu: \u00d6zel ba\u011flam men\u00fcleri, sadece i\u015flevsellik katmakla kalmaz, ayn\u0131 zamanda eri\u015filebilirlik (accessibility) a\u00e7\u0131s\u0131ndan da d\u00fc\u015f\u00fcn\u00fclmelidir. Klavye ile de men\u00fclere eri\u015fim ve gezinti imkan\u0131 sa\u011flamak, kapsay\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi i\u00e7in kritik \u00f6neme sahiptir.<br \/>\n  <\/aside>\n<h2>CanvasJS Nedir ve \u00d6zel Ba\u011flam Men\u00fcs\u00fc Kavramlar\u0131 Neleri \u0130\u00e7erir?<\/h2>\n<p>CanvasJS, modern web uygulamalar\u0131nda etkile\u015fimli ve dinamik grafikler olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. HTML5 Canvas \u00f6\u011fesini temel alarak, h\u0131zl\u0131 ve duyarl\u0131 grafikler sunar. \u00c7izgi grafiklerinden \u00e7ubuk grafiklere, pasta grafiklerinden da\u011f\u0131l\u0131m grafiklerine kadar geni\u015f bir yelpazede grafik t\u00fcr\u00fcn\u00fc destekler. Y\u00fcksek performansl\u0131 render yetenekleri sayesinde, b\u00fcy\u00fck veri k\u00fcmelerini bile ak\u0131c\u0131 bir \u015fekilde g\u00f6rselle\u015ftirebilir. CanvasJS&#8217;in esnek API&#8217;si, geli\u015ftiricilere grafiklerin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, davran\u0131\u015f\u0131n\u0131 ve hatta animasyonlar\u0131n\u0131 tamamen \u00f6zelle\u015ftirme imkan\u0131 sunar. \u00d6zellikle mobil cihazlarda dahi sorunsuz bir deneyim sa\u011flamas\u0131, onu bir\u00e7ok geli\u015ftirici i\u00e7in tercih edilen bir se\u00e7enek haline getirir. Bu makalenin odak noktas\u0131 olan \u00f6zel ba\u011flam men\u00fcleri de CanvasJS&#8217;in esnekli\u011fini kullanarak grafiklerimize entegre edebilece\u011fimiz g\u00fc\u00e7l\u00fc \u00f6zelliklerden biridir.<\/p>\n<h3>CanvasJS&#8217;in G\u00fcc\u00fc ve Esnekli\u011fi<\/h3>\n<p>CanvasJS&#8217;in temel g\u00fcc\u00fc, performans ve \u00f6zelle\u015ftirilebilirlik dengesinde yatar. K\u00fct\u00fcphane, milyonlarca veri noktas\u0131n\u0131 bile sorunsuz bir \u015fekilde i\u015fleyebilir ve bu, ger\u00e7ek zamanl\u0131 veri ak\u0131\u015f\u0131n\u0131 veya geni\u015f tarihsel veri k\u00fcmelerini g\u00f6rselle\u015ftiren uygulamalar i\u00e7in hayati \u00f6neme sahiptir. Grafikleri XML, JSON, CSV gibi farkl\u0131 veri kaynaklar\u0131ndan besleyebilir ve bu verileri dinamik olarak g\u00fcncelleyebilirsiniz. Ayr\u0131ca, \u00e7e\u015fitli etkile\u015fim \u00f6zellikleri (zoom, pan, tooltips) varsay\u0131lan olarak gelir ve geli\u015ftiricilere daha fazla i\u015f y\u00fck\u00fc bindirmeden zengin kullan\u0131c\u0131 deneyimleri sunar. Bu k\u00fct\u00fcphanenin sundu\u011fu olay dinleyicileri (event listeners), grafik \u00fczerinde ger\u00e7ekle\u015fen t\u0131klama, fareyle \u00fczerine gelme veya sa\u011f t\u0131klama gibi eylemleri yakalamam\u0131z\u0131 sa\u011flar ki bu da \u00f6zel ba\u011flam men\u00fclerinin temelini olu\u015fturur. CanvasJS ile sadece veri g\u00f6rselle\u015ftirmekle kalmaz, ayn\u0131 zamanda bu verilerle anlaml\u0131 etkile\u015fimler de kurabilirsiniz, bu da uygulaman\u0131z\u0131n de\u011ferini katlar.<\/p>\n<h3>Taray\u0131c\u0131n\u0131n Varsay\u0131lan Ba\u011flam Men\u00fcs\u00fcn\u00fc Anlamak<\/h3>\n<p>Herhangi bir web sayfas\u0131nda sa\u011f t\u0131klad\u0131\u011f\u0131n\u0131zda kar\u015f\u0131n\u0131za \u00e7\u0131kan men\u00fc, taray\u0131c\u0131n\u0131n varsay\u0131lan ba\u011flam men\u00fcs\u00fcd\u00fcr. Bu men\u00fc, genellikle &#8220;Geri&#8221;, &#8220;\u0130leri&#8221;, &#8220;Yenile&#8221;, &#8220;Kaydet&#8221;, &#8220;Yazd\u0131r&#8221;, &#8220;Sayfa Kayna\u011f\u0131n\u0131 G\u00f6r\u00fcnt\u00fcle&#8221; ve &#8220;\u0130ncele&#8221; gibi standart se\u00e7enekler sunar. Amac\u0131, kullan\u0131c\u0131n\u0131n web sayfas\u0131yla genel etkile\u015fimini kolayla\u015ft\u0131rmakt\u0131r. Ancak bir CanvasJS grafi\u011fi gibi belirli bir bile\u015fenle \u00e7al\u0131\u015f\u0131rken, bu genel se\u00e7enekler genellikle alakas\u0131z hale gelir ve hatta kullan\u0131c\u0131 deneyimini bozabilir. \u00d6rne\u011fin, bir grafi\u011fin \u00fczerine sa\u011f t\u0131klad\u0131\u011f\u0131n\u0131zda &#8220;Resmi Farkl\u0131 Kaydet&#8221; se\u00e7ene\u011fini g\u00f6rmek, kullan\u0131c\u0131n\u0131n grafikle ilgili \u00f6zel bir eylem bekledi\u011fi durumlarda hayal k\u0131r\u0131kl\u0131\u011f\u0131 yaratabilir. Bu nedenle, \u00f6zel bir ba\u011flam men\u00fcs\u00fc eklerken ilk ad\u0131m\u0131m\u0131z, taray\u0131c\u0131n\u0131n varsay\u0131lan men\u00fcs\u00fcn\u00fc devre d\u0131\u015f\u0131 b\u0131rakmak ve kendi \u00f6zel men\u00fcm\u00fcz\u00fc g\u00f6stermek olacakt\u0131r. Bu i\u015flem, JavaScript&#8217;teki <code>contextmenu<\/code> olay\u0131 dinlenerek ve olay\u0131n varsay\u0131lan davran\u0131\u015f\u0131n\u0131n engellenerek yap\u0131l\u0131r. Bu sayede, CanvasJS grafi\u011fimiz \u00fczerinde tam kontrol sa\u011flayabilir ve sadece ilgili eylemleri sunabiliriz.<\/p>\n<aside class=\"expert-tip\">\n    Uzman \u0130pucu: Taray\u0131c\u0131n\u0131n varsay\u0131lan men\u00fcs\u00fcn\u00fc engellemek, sadece grafik \u00fczerinde yap\u0131lmal\u0131d\u0131r. T\u00fcm sayfa i\u00e7in engellemek, kullan\u0131c\u0131lar\u0131n bekledi\u011fi standart taray\u0131c\u0131 i\u015flevlerini k\u0131s\u0131tlayarak k\u00f6t\u00fc bir deneyime yol a\u00e7abilir.<br \/>\n  <\/aside>\n<h2>CanvasJS Grafi\u011finde Sa\u011f T\u0131klama Olay\u0131 Nas\u0131l Yakalan\u0131r ve Y\u00f6netilir?<\/h2>\n<p>CanvasJS grafi\u011finizin \u00fczerinde bir kullan\u0131c\u0131 sa\u011f t\u0131klad\u0131\u011f\u0131nda, taray\u0131c\u0131 bir <code>contextmenu<\/code> olay\u0131 tetikler. Bu olay\u0131 yakalamak ve kendi \u00f6zel ba\u011flam men\u00fcm\u00fcz\u00fc g\u00f6stermek, s\u00fcrecin temel ad\u0131m\u0131d\u0131r. Bu b\u00f6l\u00fcmde, hem HTML yap\u0131m\u0131z\u0131 haz\u0131rlayacak hem de JavaScript kullanarak bu olay\u0131 nas\u0131l dinleyece\u011fimizi ve y\u00f6netece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu sayede, taray\u0131c\u0131n\u0131n varsay\u0131lan men\u00fcs\u00fcn\u00fc devre d\u0131\u015f\u0131 b\u0131rakarak kendi \u00f6zel men\u00fcm\u00fcz i\u00e7in zemini haz\u0131rlayaca\u011f\u0131z. Unutmay\u0131n, bu ad\u0131m, uygulaman\u0131z\u0131n kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek i\u00e7in kritik bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n<h3>HTML Yap\u0131s\u0131n\u0131 Haz\u0131rlama<\/h3>\n<p>Her \u015feyden \u00f6nce, CanvasJS grafi\u011fimizi ve \u00f6zel ba\u011flam men\u00fcm\u00fcz\u00fc bar\u0131nd\u0131racak temel bir HTML yap\u0131s\u0131na ihtiyac\u0131m\u0131z var. Grafi\u011fi yerle\u015ftirece\u011fimiz bir <code>div<\/code> etiketi ve gizli olarak duracak, sa\u011f t\u0131kland\u0131\u011f\u0131nda g\u00f6r\u00fcn\u00fcr hale gelecek men\u00fcm\u00fcz i\u00e7in ba\u015fka bir <code>div<\/code> etiketi olu\u015fturaca\u011f\u0131z. Bu yap\u0131, hem CanvasJS&#8217;in d\u00fczg\u00fcn \u00e7al\u0131\u015fmas\u0131 hem de men\u00fcm\u00fcz\u00fcn kontrol edilebilirli\u011fi a\u00e7\u0131s\u0131ndan \u00f6nemlidir. Grafi\u011fi i\u00e7eren <code>div<\/code> elementine bir ID vermek, JavaScript \u00fczerinden ona eri\u015fmemizi kolayla\u015ft\u0131racakt\u0131r. Benzer \u015fekilde, \u00f6zel men\u00fc i\u00e7in de bir ID atamak, men\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc ve konumunu dinamik olarak y\u00f6netmemizi sa\u011flayacakt\u0131r. A\u015fa\u011f\u0131daki kod blo\u011fu, basit bir HTML iskeletini g\u00f6stermektedir:<\/p>\n<pre><code class=\"language-html\">\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>CanvasJS \u00d6zel Ba\u011flam Men\u00fcs\u00fc<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    <h2>Sat\u0131\u015f Performans\u0131 Grafi\u011fi<\/h2>\n    <div id=\"chartContainer\" style=\"height: 370px; width: 80%; margin: 20px auto; border: 1px solid #ddd;\"><\/div>\n\n    <!-- \u00d6zel Ba\u011flam Men\u00fcs\u00fc -->\n    <div id=\"customContextMenu\" class=\"context-menu\">\n        <ul>\n            <li data-action=\"download-csv\">Veriyi CSV Olarak \u0130ndir<\/li>\n            <li data-action=\"filter-month\">Bu Ay\u0131 Filtrele<\/li>\n            <li data-action=\"view-details\">Ayr\u0131nt\u0131lar\u0131 G\u00f6r\u00fcnt\u00fcle<\/li>\n            <li data-action=\"change-type\">Grafik Tipini De\u011fi\u015ftir<\/li>\n        <\/ul>\n    <\/div>\n\n    <script src=\"https:\/\/canvasjs.com\/assets\/script\/canvasjs.min.js\"><\/script>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n  <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte <code>chartContainer<\/code>, CanvasJS grafi\u011fimizin render edilece\u011fi aland\u0131r. <code>customContextMenu<\/code> ise, sa\u011f t\u0131kland\u0131\u011f\u0131nda g\u00f6r\u00fcnt\u00fclenecek olan men\u00fcd\u00fcr. Men\u00fcn\u00fcn ba\u015flang\u0131\u00e7ta gizli olmas\u0131 ve do\u011fru konumda g\u00f6sterilmesi i\u00e7in CSS ile stilize edilmesi gerekecektir. Her bir men\u00fc \u00f6\u011fesine (<code>li<\/code>) ekledi\u011fimiz <code>data-action<\/code> \u00f6zniteli\u011fi, JavaScript taraf\u0131nda hangi eylemin tetiklendi\u011fini kolayca anlamam\u0131z\u0131 sa\u011flayacak \u00f6nemli bir detayd\u0131r.<\/p>\n<h3>JavaScript ile Olay Dinleme<\/h3>\n<p>\u015eimdi s\u0131ra, CanvasJS grafi\u011fi \u00fczerinde ger\u00e7ekle\u015fen sa\u011f t\u0131klama olay\u0131n\u0131 yakalamaya geldi. Bunun i\u00e7in, <code>chartContainer<\/code> elementine bir <code>contextmenu<\/code> olay dinleyicisi ekleyece\u011fiz. Bu olay dinleyicisi tetiklendi\u011finde, ilk yapmam\u0131z gereken taray\u0131c\u0131n\u0131n varsay\u0131lan ba\u011flam men\u00fcs\u00fcn\u00fc <code>event.preventDefault()<\/code> metodu ile engellemektir. Ard\u0131ndan, kendi \u00f6zel men\u00fcm\u00fcz\u00fc g\u00f6r\u00fcn\u00fcr hale getirecek ve farenin sa\u011f t\u0131klama yapt\u0131\u011f\u0131 konuma g\u00f6re konumland\u0131raca\u011f\u0131z. Men\u00fc, kullan\u0131c\u0131 t\u0131klayana veya ba\u015fka bir yere t\u0131klayana kadar g\u00f6r\u00fcn\u00fcr kalmal\u0131d\u0131r. A\u015fa\u011f\u0131daki JavaScript kodu, bu temel i\u015flevselli\u011fi nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 g\u00f6stermektedir:<\/p>\n<pre><code class=\"language-javascript\">\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    var chart = new CanvasJS.Chart(\"chartContainer\", {\n        animationEnabled: true,\n        theme: \"light2\",\n        title:{\n            text: \"Ayl\u0131k Sat\u0131\u015f Raporu\"\n        },\n        axisY: {\n            title: \"Sat\u0131\u015f Miktar\u0131 (USD)\"\n        },\n        data: [{\n            type: \"column\",\n            dataPoints: [\n                { label: \"Ocak\", y: 25000 },\n                { label: \"\u015eubat\", y: 28000 },\n                { label: \"Mart\", y: 32000 },\n                { label: \"Nisan\", y: 30000 },\n                { label: \"May\u0131s\", y: 35000 },\n                { label: \"Haziran\", y: 38000 },\n                { label: \"Temmuz\", y: 30000 },\n                { label: \"A\u011fustos\", y: 33000 },\n                { label: \"Eyl\u00fcl\", y: 36000 },\n                { label: \"Ekim\", y: 31000 },\n                { label: \"Kas\u0131m\", y: 34000 },\n                { label: \"Aral\u0131k\", y: 39000 }\n            ]\n        }]\n    });\n    chart.render();\n\n    var chartContainer = document.getElementById(\"chartContainer\");\n    var customContextMenu = document.getElementById(\"customContextMenu\");\n\n    \/\/ CanvasJS container \u00fczerinde sa\u011f t\u0131klama olay\u0131n\u0131 dinle\n    chartContainer.addEventListener(\"contextmenu\", function(event) {\n        event.preventDefault(); \/\/ Taray\u0131c\u0131n\u0131n varsay\u0131lan men\u00fcs\u00fcn\u00fc engelle\n\n        \/\/ Men\u00fcy\u00fc farenin oldu\u011fu konuma yerle\u015ftir\n        customContextMenu.style.top = event.clientY + \"px\";\n        customContextMenu.style.left = event.clientX + \"px\";\n        customContextMenu.style.display = \"block\"; \/\/ Men\u00fcy\u00fc g\u00f6r\u00fcn\u00fcr yap\n    });\n\n    \/\/ Herhangi bir yere t\u0131kland\u0131\u011f\u0131nda men\u00fcy\u00fc gizle\n    document.addEventListener(\"click\", function(event) {\n        if (event.target.closest(\"#customContextMenu\") === null) {\n            customContextMenu.style.display = \"none\";\n        }\n    });\n});\n  <\/pre>\n<p><\/code><\/p>\n<p>Bu kod par\u00e7as\u0131, CanvasJS grafi\u011fini ba\u015flat\u0131r ve ard\u0131ndan <code>chartContainer<\/code> \u00fczerinde <code>contextmenu<\/code> olay\u0131n\u0131 yakalar. <code>event.preventDefault()<\/code> \u00e7a\u011fr\u0131s\u0131 ile taray\u0131c\u0131n\u0131n kendi men\u00fcs\u00fc g\u00f6sterilmez. <code>event.clientX<\/code> ve <code>event.clientY<\/code> de\u011ferleri kullan\u0131larak men\u00fc, farenin sa\u011f t\u0131kland\u0131\u011f\u0131 konuma sabitlenir. Son olarak, men\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc sa\u011flamak i\u00e7in <code>display<\/code> \u00f6zelli\u011fi <code>\"block\"<\/code> olarak ayarlan\u0131r. Ayr\u0131ca, men\u00fc d\u0131\u015f\u0131ndaki herhangi bir t\u0131klamada men\u00fcn\u00fcn gizlenmesini sa\u011flamak i\u00e7in genel bir <code>click<\/code> olay dinleyicisi eklenir. Bu sayede, kullan\u0131c\u0131 men\u00fc d\u0131\u015f\u0131na t\u0131klad\u0131\u011f\u0131nda men\u00fc otomatik olarak kapan\u0131r, bu da daha iyi bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n<h2>\u00d6zel Ba\u011flam Men\u00fcs\u00fc Aray\u00fcz\u00fc Nas\u0131l Olu\u015fturulur ve Stilize Edilir?<\/h2>\n<p>\u00d6zel ba\u011flam men\u00fcm\u00fcz\u00fcn yaln\u0131zca i\u015flevsel olmas\u0131 yeterli de\u011fildir; ayn\u0131 zamanda estetik ve kullan\u0131c\u0131 dostu olmas\u0131 da \u00f6nemlidir. Bu b\u00f6l\u00fcmde, men\u00fcm\u00fcz\u00fcn HTML yap\u0131s\u0131n\u0131 daha ayr\u0131nt\u0131l\u0131 inceleyecek ve CSS kullanarak ona profesyonel bir g\u00f6r\u00fcn\u00fcm kazand\u0131raca\u011f\u0131z. Men\u00fcn\u00fcn renkleri, fontlar\u0131, g\u00f6lgeleri ve genel yerle\u015fimi, uygulaman\u0131z\u0131n genel tasar\u0131m diline uygun olmal\u0131d\u0131r. Ayr\u0131ca, men\u00fc \u00f6\u011felerinin \u00fczerine gelindi\u011finde veya t\u0131kland\u0131\u011f\u0131nda g\u00f6rsel geri bildirim sa\u011flamak, kullan\u0131c\u0131ya men\u00fcyle etkile\u015fimde oldu\u011funu hissettirir ve deneyimi daha ak\u0131c\u0131 hale getirir. Sa\u011f t\u0131klama men\u00fcs\u00fcn\u00fcn sadece g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc de\u011fil, ayn\u0131 zamanda performans\u0131n\u0131 ve eri\u015filebilirli\u011fini de dikkate alarak nas\u0131l optimize edece\u011fimize odaklanaca\u011f\u0131z. G\u00f6rsel tutarl\u0131l\u0131k, kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131 daha kolay ve keyifli bir \u015fekilde kullanmas\u0131n\u0131 sa\u011flar.<\/p>\n<h3>Men\u00fc \u00d6\u011felerinin HTML Tasar\u0131m\u0131<\/h3>\n<p>Ba\u011flam men\u00fcm\u00fcz\u00fcn temel yap\u0131s\u0131 genellikle bir s\u0131ral\u0131 olmayan liste (<code><\/p>\n<ul><\/code>) ve liste \u00f6\u011felerinden (<code><\/p>\n<li><\/code>) olu\u015fur. Her <code>\n<li><\/code> elementi, men\u00fcdeki bir eylemi temsil eder. Daha \u00f6nce de belirtti\u011fimiz gibi, bu \u00f6\u011felere <code>data-action<\/code> \u00f6zniteli\u011fi eklemek, JavaScript taraf\u0131nda hangi eylemin tetiklendi\u011fini kolayca anlamam\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bir \"Veriyi CSV Olarak \u0130ndir\" se\u00e7ene\u011fi i\u00e7in <code>data-action=\"download-csv\"<\/code> gibi bir de\u011fer kullan\u0131labilir. Bu yap\u0131, men\u00fcy\u00fc hem esnek hem de kolay y\u00f6netilebilir k\u0131lar. \u0130lerleyen zamanlarda men\u00fcye yeni \u00f6\u011feler eklemek veya mevcut \u00f6\u011feleri d\u00fczenlemek olduk\u00e7a basittir.<\/p>\n<pre><code class=\"language-html\">\n<div id=\"customContextMenu\" class=\"context-menu\">\n    <ul>\n        <li data-action=\"download-csv\"><i class=\"fas fa-download\"><\/i> Veriyi CSV Olarak \u0130ndir<\/li>\n        <li data-action=\"filter-month\"><i class=\"fas fa-filter\"><\/i> Bu Ay\u0131 Filtrele<\/li>\n        <li data-action=\"view-details\"><i class=\"fas fa-info-circle\"><\/i> Ayr\u0131nt\u0131lar\u0131 G\u00f6r\u00fcnt\u00fcle<\/li>\n        <li data-action=\"change-type\"><i class=\"fas fa-chart-bar\"><\/i> Grafik Tipini De\u011fi\u015ftir<\/li>\n        <li class=\"separator\"><\/li> <!-- Ay\u0131r\u0131c\u0131 \u00f6\u011fe -->\n        <li data-action=\"print-chart\"><i class=\"fas fa-print\"><\/i> Grafi\u011fi Yazd\u0131r<\/li>\n    <\/ul>\n<\/div>\n  <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, men\u00fc \u00f6\u011felerine Font Awesome gibi bir ikon k\u00fct\u00fcphanesinden ikonlar ekleyerek men\u00fcn\u00fcn g\u00f6rsel \u00e7ekicili\u011fini ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131rd\u0131k. Ayr\u0131ca, men\u00fc \u00f6\u011feleri aras\u0131na g\u00f6rsel bir ay\u0131r\u0131c\u0131 eklemek i\u00e7in <code>class=\"separator\"<\/code> olan bo\u015f bir <code><\/p>\n<li><\/code> elementi de kullan\u0131ld\u0131. Bu, men\u00fcy\u00fc mant\u0131ksal gruplara ay\u0131rmak ve daha d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sunmak i\u00e7in olduk\u00e7a faydal\u0131d\u0131r. Bu HTML yap\u0131s\u0131, men\u00fcn\u00fcn i\u00e7eri\u011fini ve hiyerar\u015fisini tan\u0131mlar; geri kalan g\u00f6rsel d\u00fczenleme CSS ile yap\u0131lacakt\u0131r. Men\u00fc \u00f6\u011felerinin okunabilirli\u011fi ve kullan\u0131c\u0131lar\u0131n beklentilerine uygun bir \u015fekilde sunulmas\u0131, genel deneyimi do\u011frudan etkileyecektir.<\/p>\n<h3>CSS ile G\u00f6rsel Zenginle\u015ftirme<\/h3>\n<p>Men\u00fcn\u00fcn HTML yap\u0131s\u0131n\u0131 olu\u015fturduktan sonra, s\u0131ra geldi onu CSS ile \u015fekillendirmeye. \u00d6zel ba\u011flam men\u00fcs\u00fcn\u00fcn ba\u015flang\u0131\u00e7ta gizli olmas\u0131, belirli bir arka plan rengine, g\u00f6lgeye ve kenarl\u0131klara sahip olmas\u0131 gereklidir. Ayr\u0131ca, men\u00fc \u00f6\u011felerinin \u00fczerine gelindi\u011finde de\u011fi\u015fen bir arka plan rengi veya metin rengi gibi etkile\u015fimli stiller de eklemeliyiz. Bu, men\u00fcn\u00fcn daha modern ve kullan\u0131\u015fl\u0131 g\u00f6r\u00fcnmesini sa\u011flayacakt\u0131r. Men\u00fcn\u00fcn konumunu belirlemek i\u00e7in <code>position: fixed<\/code> kullanmak, sayfa kayd\u0131r\u0131lsa bile men\u00fcn\u00fcn do\u011fru konumda kalmas\u0131n\u0131 sa\u011flar. A\u015fa\u011f\u0131daki CSS kodu, men\u00fcye temel bir stil kazand\u0131r\u0131r:<\/p>\n<pre><code class=\"language-css\">\n\/* style.css *\/\n\n.context-menu {\n    display: none; \/* Ba\u015flang\u0131\u00e7ta gizli *\/\n    position: fixed; \/* Ekran boyutlar\u0131na g\u00f6re sabit kal\u0131r *\/\n    background-color: #fff;\n    border: 1px solid #ccc;\n    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);\n    min-width: 200px;\n    z-index: 1000; \/* Di\u011fer \u00f6\u011felerin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011flar *\/\n    border-radius: 4px;\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.context-menu ul {\n    list-style: none;\n    margin: 0;\n    padding: 5px 0;\n}\n\n.context-menu ul li {\n    padding: 10px 15px;\n    cursor: pointer;\n    font-size: 14px;\n    color: #333;\n    display: flex; \/* \u0130kon ve metni hizalamak i\u00e7in *\/\n    align-items: center;\n}\n\n.context-menu ul li i {\n    margin-right: 10px; \/* \u0130kon ile metin aras\u0131na bo\u015fluk *\/\n    color: #666;\n}\n\n.context-menu ul li:hover {\n    background-color: #f0f0f0;\n    color: #007bff;\n}\n\n.context-menu ul li.separator {\n    border-top: 1px solid #eee;\n    margin: 5px 0;\n    padding: 0;\n}\n\n\/* Mobil cihazlar i\u00e7in daha b\u00fcy\u00fck dokunma alanlar\u0131 *\/\n@media (max-width: 768px) {\n    .context-menu ul li {\n        padding: 15px 20px;\n        font-size: 16px;\n    }\n}\n  <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki CSS, <code>.context-menu<\/code> s\u0131n\u0131f\u0131na sahip div'i ba\u015flang\u0131\u00e7ta gizler ve onu sabitleyen bir pozisyona yerle\u015ftirir. Arka plan rengi, kenarl\u0131k ve g\u00f6lge gibi temel stil \u00f6zelliklerini ayarlar. Men\u00fc i\u00e7indeki liste \u00f6\u011feleri i\u00e7in de uygun dolgular, font boyutlar\u0131 ve fare \u00fczerine gelindi\u011finde de\u011fi\u015fen stiller tan\u0131mlanm\u0131\u015ft\u0131r. <code>z-index<\/code> \u00f6zelli\u011fi, men\u00fcn\u00fcn di\u011fer t\u00fcm sayfa \u00f6\u011felerinin \u00fczerinde g\u00f6r\u00fcnmesini sa\u011flamak i\u00e7in kritik \u00f6neme sahiptir. Ayr\u0131ca, ikonlar\u0131n ve metinlerin d\u00fczg\u00fcn hizalanmas\u0131 i\u00e7in <code>display: flex<\/code> ve <code>align-items: center<\/code> kullan\u0131ld\u0131. Mobil uyumluluk ad\u0131na bir medya sorgusu ekleyerek men\u00fc \u00f6\u011felerinin mobil cihazlarda daha b\u00fcy\u00fck dokunma alanlar\u0131na sahip olmas\u0131n\u0131 sa\u011flad\u0131k, bu da dokunmatik ekranl\u0131 cihazlarda kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r. Bu stilize edilmi\u015f men\u00fc, kullan\u0131c\u0131lar\u0131n\u0131za hem i\u015flevsellik hem de g\u00f6rsel bir \u015f\u00f6len sunacakt\u0131r.<\/p>\n<h2>Men\u00fc \u0130\u015flevsellikleri Nas\u0131l Uygulan\u0131r ve Dinamik Hale Getirilir?<\/h2>\n<p>Men\u00fcm\u00fcz\u00fcn g\u00f6rselini tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi s\u0131ra ona hayat vermeye geldi. Bu b\u00f6l\u00fcm, \u00f6zel ba\u011flam men\u00fcm\u00fczdeki her bir \u00f6\u011feye nas\u0131l i\u015flevsellik kataca\u011f\u0131m\u0131z\u0131 ve bu i\u015flevsellikleri ger\u00e7ek d\u00fcnya senaryolar\u0131na nas\u0131l uyarlayaca\u011f\u0131m\u0131z\u0131 ele alacakt\u0131r. Men\u00fc \u00f6\u011felerine t\u0131klama olaylar\u0131n\u0131 dinleyerek, ilgili eylemleri tetikleyen JavaScript kodlar\u0131n\u0131 yazaca\u011f\u0131z. Ayr\u0131ca, men\u00fcn\u00fcn i\u00e7eri\u011fini veya davran\u0131\u015f\u0131n\u0131 dinamik olarak de\u011fi\u015ftirebilmek i\u00e7in geli\u015fmi\u015f y\u00f6ntemleri de inceleyece\u011fiz. Bu, men\u00fcy\u00fc sadece statik bir ara\u00e7 olmaktan \u00e7\u0131kar\u0131p, kullan\u0131c\u0131n\u0131n etkile\u015fimine g\u00f6re \u015fekillenen dinamik bir bile\u015fene d\u00f6n\u00fc\u015ft\u00fcrmemizi sa\u011flayacakt\u0131r. \u0130\u015flevsellik ekleme s\u00fcreci, uygulaman\u0131z\u0131n interaktif potansiyelini maksimize etmek i\u00e7in kritik bir ad\u0131md\u0131r.<\/p>\n<h3>JavaScript ile Men\u00fc \u00d6\u011felerine \u0130\u015flevsellik Katma<\/h3>\n<p>\u00d6zel ba\u011flam men\u00fcm\u00fczdeki her bir liste \u00f6\u011fesine (<code><\/p>\n<li><\/code>) bir <code>click<\/code> olay dinleyicisi ekleyerek i\u015flevsellik kazand\u0131rabiliriz. Daha \u00f6nce ekledi\u011fimiz <code>data-action<\/code> \u00f6zniteli\u011fi sayesinde, hangi men\u00fc \u00f6\u011fesine t\u0131kland\u0131\u011f\u0131n\u0131 kolayca belirleyebilir ve buna g\u00f6re farkl\u0131 eylemler tetikleyebiliriz. Her bir eylem i\u00e7in ayr\u0131 bir fonksiyon tan\u0131mlamak veya bir <code>switch<\/code> ifadesi kullanmak, kodunuzu d\u00fczenli ve okunabilir tutman\u0131n iyi bir yoludur. Men\u00fc \u00f6\u011fesine t\u0131kland\u0131\u011f\u0131nda, ilgili i\u015flevi \u00e7a\u011f\u0131rmadan \u00f6nce men\u00fcy\u00fc gizlemeyi unutmamal\u0131y\u0131z. Bu, kullan\u0131c\u0131n\u0131n men\u00fcy\u00fc her kulland\u0131\u011f\u0131nda bekledi\u011fi do\u011fal davran\u0131\u015ft\u0131r. A\u015fa\u011f\u0131daki JavaScript kodu, bu i\u015flevselli\u011fi nas\u0131l uygulayaca\u011f\u0131n\u0131z\u0131 g\u00f6sterir:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ script.js dosyas\u0131n\u0131n devam\u0131\n\ncustomContextMenu.addEventListener(\"click\", function(event) {\n    var target = event.target;\n    var action = target.getAttribute(\"data-action\");\n\n    if (action) {\n        customContextMenu.style.display = \"none\"; \/\/ \u0130\u015flev tetiklenmeden \u00f6nce men\u00fcy\u00fc gizle\n\n        switch (action) {\n            case \"download-csv\":\n                downloadDataAsCsv(chart.options.data[0].dataPoints);\n                console.log(\"Veri CSV olarak indiriliyor...\");\n                break;\n            case \"filter-month\":\n                filterChartByMonth(target.dataset.month || \"current\"); \/\/ Varsay\u0131lan veya belirli ay\n                console.log(\"Bu ay filtreleniyor...\");\n                break;\n            case \"view-details\":\n                showDetailsModal(chart.options.data[0].dataPoints);\n                console.log(\"Ayr\u0131nt\u0131lar g\u00f6r\u00fcnt\u00fcleniyor...\");\n                break;\n            case \"change-type\":\n                changeChartType();\n                console.log(\"Grafik tipi de\u011fi\u015ftiriliyor...\");\n                break;\n            case \"print-chart\":\n                printChart(chartContainer);\n                console.log(\"Grafik yazd\u0131r\u0131l\u0131yor...\");\n                break;\n            default:\n                console.log(\"Tan\u0131mlanmayan eylem: \" + action);\n        }\n    }\n});\n\nfunction downloadDataAsCsv(dataPoints) {\n    let csvContent = \"data:text\/csv;charset=utf-8,\";\n    csvContent += \"Label,Value\\n\"; \/\/ Ba\u015fl\u0131k sat\u0131r\u0131\n    dataPoints.forEach(function(item) {\n        csvContent += item.label + \",\" + item.y + \"\\n\";\n    });\n\n    const encodedUri = encodeURI(csvContent);\n    const link = document.createElement(\"a\");\n    link.setAttribute(\"href\", encodedUri);\n    link.setAttribute(\"download\", \"canvasjs_data.csv\");\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n}\n\nfunction filterChartByMonth(month) {\n    \/\/ Burada CanvasJS grafi\u011finizin veri noktalar\u0131n\u0131 dinamik olarak g\u00fcncelleyebilirsiniz.\n    \/\/ \u00d6rne\u011fin, belirli bir aya ait verileri g\u00f6sterip di\u011ferlerini gizleyebilirsiniz.\n    console.log(<code>${month} ay\u0131na g\u00f6re grafik filtrelendi.<\/code>);\n    \/\/ chart.options.data[0].dataPoints = filteredData;\n    \/\/ chart.render();\n}\n\nfunction showDetailsModal(dataPoints) {\n    \/\/ Veri noktalar\u0131na ili\u015fkin detaylar\u0131 bir modal pencerede g\u00f6sterme\n    alert(\"Detaylar g\u00f6r\u00fcnt\u00fclenecek! \u00d6rne\u011fin, modal pencere a\u00e7abilirsiniz.\");\n    console.log(\"G\u00f6sterilecek veri detaylar\u0131:\", dataPoints);\n}\n\nfunction changeChartType() {\n    \/\/ Grafik tipini dinamik olarak de\u011fi\u015ftirme (\u00f6rn: s\u00fctundan \u00e7izgiye)\n    const currentType = chart.options.data[0].type;\n    chart.options.data[0].type = (currentType === \"column\") ? \"line\" : \"column\";\n    chart.render();\n    alert(<code>Grafik tipi ${chart.options.data[0].type} olarak de\u011fi\u015ftirildi.<\/code>);\n}\n\nfunction printChart(chartElement) {\n    \/\/ Grafi\u011fi yazd\u0131rmak i\u00e7in yeni bir pencere a\u00e7abilir veya CSS ile yazd\u0131rma d\u00fczenlemesi yapabilirsiniz.\n    const printWindow = window.open('', '_blank');\n    printWindow.document.write('<html><head><title>CanvasJS Grafik Yazd\u0131r<\/title>');\n    printWindow.document.write('<style>body { margin: 0; padding: 0; } #chartContainer { width: 100% !important; height: auto !important; }<\/style>');\n    printWindow.document.write('<\/head><body>');\n    printWindow.document.write(chartElement.outerHTML);\n    printWindow.document.write('<\/body><\/html>');\n    printWindow.document.close();\n    printWindow.print();\n    printWindow.close();\n}\n  <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki kod, <code>customContextMenu<\/code> elementine bir olay dinleyicisi ekler. T\u0131klanan \u00f6\u011fenin <code>data-action<\/code> \u00f6zniteli\u011fi al\u0131n\u0131r ve bir <code>switch<\/code> ifadesi kullan\u0131larak ilgili fonksiyon \u00e7a\u011fr\u0131l\u0131r. \u00d6rne\u011fin, \"Veriyi CSV Olarak \u0130ndir\" se\u00e7ene\u011fi t\u0131kland\u0131\u011f\u0131nda <code>downloadDataAsCsv<\/code> fonksiyonu \u00e7al\u0131\u015f\u0131r. Bu fonksiyon, CanvasJS'in mevcut veri noktalar\u0131n\u0131 alarak basit bir CSV dosyas\u0131 olu\u015fturur ve kullan\u0131c\u0131n\u0131n indirmesini sa\u011flar. Di\u011fer fonksiyonlar da benzer mant\u0131kla \u00e7al\u0131\u015f\u0131r ve CanvasJS grafiklerini dinamik olarak g\u00fcncelleyebilir veya harici bir modal pencere a\u00e7abilirler. Bu yakla\u015f\u0131m, men\u00fcdeki her eylemin a\u00e7\u0131k\u00e7a tan\u0131mlanmas\u0131n\u0131 ve kolayca y\u00f6netilmesini sa\u011flar. Ayr\u0131ca, <code>printChart<\/code> fonksiyonu, grafi\u011fi yeni bir pencerede a\u00e7arak taray\u0131c\u0131n\u0131n yazd\u0131rma i\u015flevselli\u011fini kullan\u0131r ve b\u00f6ylece kullan\u0131c\u0131n\u0131n grafi\u011fi do\u011frudan yazd\u0131rmas\u0131na olanak tan\u0131r. Bu sayede, men\u00fcye ekledi\u011finiz her bir \u00f6\u011fe, uygulaman\u0131z\u0131n genel i\u015flevselli\u011fini art\u0131ran anlaml\u0131 bir eylemi temsil etmi\u015f olur.<\/p>\n<h3>Ger\u00e7ek D\u00fcnya Senaryosu: Veri Filtreleme ve \u0130hracat<\/h3>\n<p>Bir finansal analiz panosu geli\u015ftirdi\u011finizi d\u00fc\u015f\u00fcn\u00fcn. Kullan\u0131c\u0131lar\u0131n\u0131z, farkl\u0131 hisse senetlerinin performans\u0131n\u0131 g\u00f6steren CanvasJS \u00e7izgi grafikleriyle kar\u015f\u0131la\u015f\u0131yorlar. Bir hisse senedi grafi\u011fine sa\u011f t\u0131klad\u0131klar\u0131nda, a\u015fa\u011f\u0131daki se\u00e7enekleri g\u00f6rmeliler:<\/p>\n<ul>\n<li><strong>\"Tarih Aral\u0131\u011f\u0131n\u0131 Ayarla\":<\/strong> Kullan\u0131c\u0131n\u0131n belirli bir tarih aral\u0131\u011f\u0131 se\u00e7mesini sa\u011flayan bir modal a\u00e7ar.<\/li>\n<li><strong>\"Kar\u015f\u0131la\u015ft\u0131r\":<\/strong> Se\u00e7ilen hisse senedini ba\u015fka bir hisse senediyle ayn\u0131 grafikte kar\u015f\u0131la\u015ft\u0131rmak i\u00e7in bir se\u00e7enek sunar.<\/li>\n<li><strong>\"Veriyi Excel'e Aktar\":<\/strong> Grafikteki ham veriyi Excel format\u0131nda indirilmesini sa\u011flar.<\/li>\n<li><strong>\"Hisse Senedi Haberlerini G\u00f6r\u00fcnt\u00fcle\":<\/strong> Se\u00e7ilen hisse senedinin son haberlerini yeni bir pencerede g\u00f6sterir.<\/li>\n<\/ul>\n<p>Bu senaryoyu uygulamak i\u00e7in, <code>contextmenu<\/code> olay dinleyicimizi sadece <code>chartContainer<\/code> \u00fczerinde de\u011fil, ayn\u0131 zamanda CanvasJS'in <code>dataPoints<\/code> \u00fczerinde de tetikleyebiliriz. CanvasJS, her bir veri noktas\u0131na olay dinleyicileri ataman\u0131za olanak tan\u0131r. Ancak, t\u00fcm chart alan\u0131 i\u00e7in tek bir ba\u011flam men\u00fcs\u00fc daha pratik bir yakla\u015f\u0131md\u0131r. A\u015fa\u011f\u0131da, \"Veriyi Excel'e Aktar\" ve \"Hisse Senedi Haberlerini G\u00f6r\u00fcnt\u00fcle\" i\u015flevlerini daha detayl\u0131 uygulayan bir \u00f6rnek bulunmaktad\u0131r:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ \u00d6nceki CanvasJS chart objesi zaten olu\u015fturulmu\u015f varsay\u0131lm\u0131\u015ft\u0131r.\n\n\/\/ Dinamik men\u00fc \u00f6\u011feleri eklemek i\u00e7in veya men\u00fcdeki \u00f6\u011felerin eylemlerini\n\/\/ chart'\u0131n g\u00fcncel durumuna g\u00f6re ayarlamak i\u00e7in:\n\n\/\/ Mevcut men\u00fc \u00f6\u011feleri\n\/\/ <li data-action=\"download-excel\">Veriyi Excel'e Aktar<\/li>\n\/\/ <li data-action=\"view-stock-news\">Hisse Senedi Haberlerini G\u00f6r\u00fcnt\u00fcle<\/li>\n\n\/\/ ... customContextMenu.addEventListener(\"click\", ...) blo\u011funda ilgili case'leri ekleyelim:\n\/\/ case \"download-excel\":\n\/\/     downloadDataAsExcel(chart.options.data[0].dataPoints, \"HisseSenediVerileri\");\n\/\/     console.log(\"Veri Excel'e aktar\u0131l\u0131yor...\");\n\/\/     break;\n\/\/ case \"view-stock-news\":\n\/\/     const selectedStock = chart.options.title.text.replace(\"Performans\u0131\", \"\").trim(); \/\/ Grafi\u011fin ba\u015fl\u0131\u011f\u0131ndan hisse senedi ad\u0131n\u0131 al\n\/\/     viewStockNews(selectedStock);\n\/\/     console.log(<code>${selectedStock} hisse senedi haberleri g\u00f6r\u00fcnt\u00fcleniyor...<\/code>);\n\/\/     break;\n\nfunction downloadDataAsExcel(dataPoints, filename = \"data\") {\n    \/\/ XLSX k\u00fct\u00fcphanesi veya benzeri bir istemci taraf\u0131 k\u00fct\u00fcphane gerektirebilir.\n    \/\/ Basit bir CSV tabanl\u0131 Excel benzeri \u00e7\u0131kt\u0131 i\u00e7in:\n    let excelContent = \"data:application\/vnd.ms-excel;charset=utf-8,\";\n    excelContent += \"Label\\tValue\\n\"; \/\/ Tab ayrac\u0131 ile ba\u015fl\u0131k sat\u0131r\u0131\n    dataPoints.forEach(function(item) {\n        excelContent += item.label + \"\\t\" + item.y + \"\\n\";\n    });\n\n    const encodedUri = encodeURI(excelContent);\n    const link = document.createElement(\"a\");\n    link.setAttribute(\"href\", encodedUri);\n    link.setAttribute(\"download\", <code>${filename}.xls<\/code>); \/\/ .xls uzant\u0131s\u0131 ile Excel olarak indir\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    alert(\"Veriler Excel olarak indirildi!\");\n}\n\nfunction viewStockNews(stockSymbol) {\n    \/\/ Ger\u00e7ek bir senaryoda, bu fonksiyon bir API \u00e7a\u011fr\u0131s\u0131 yaparak\n    \/\/ ilgili hisse senedinin haberlerini al\u0131p yeni bir pencerede g\u00f6sterecektir.\n    \/\/ Basit bir \u00f6rnek i\u00e7in:\n    const newsUrl = <code>https:\/\/www.google.com\/search?q=${encodeURIComponent(stockSymbol)}+hisse+senedi+haberleri<\/code>;\n    window.open(newsUrl, '_blank');\n    alert(<code>${stockSymbol} hisse senedi haberleri a\u00e7\u0131l\u0131yor...<\/code>);\n}\n\n\/\/ Grafik olu\u015fturulurken, sa\u011f t\u0131klanan veri noktas\u0131 hakk\u0131nda bilgi almak i\u00e7in CanvasJS'in\n\/\/ dataPoint click olay\u0131n\u0131 da kullanabiliriz (varsay\u0131lan men\u00fc i\u00e7in de\u011fil, ama faydal\u0131).\n\/\/ chart.options.data[0].click = function(e){\n\/\/     console.log(\"T\u0131klanan veri noktas\u0131:\", e.dataPoint);\n\/\/     \/\/ E\u011fer sa\u011f t\u0131klama men\u00fcs\u00fc veri noktas\u0131na \u00f6zel bilgiler i\u00e7erecekse,\n\/\/     \/\/ bu bilgileri bir de\u011fi\u015fkende saklay\u0131p men\u00fc a\u00e7\u0131ld\u0131\u011f\u0131nda kullanabiliriz.\n\/\/ };\n  <\/pre>\n<p><\/code><\/p>\n<p>Bu \u00f6rnekte, <code>downloadDataAsExcel<\/code> fonksiyonu, verileri Excel'e benzer bir tablo format\u0131nda (tab ayrac\u0131 kullanarak) indirir. Ger\u00e7ek bir Excel dosyas\u0131 olu\u015fturmak i\u00e7in SheetJS gibi daha geli\u015fmi\u015f k\u00fct\u00fcphaneler gerekebilir, ancak bu yakla\u015f\u0131m basit ihtiya\u00e7lar i\u00e7in yeterlidir. <code>viewStockNews<\/code> fonksiyonu ise, se\u00e7ilen hisse senedinin ad\u0131n\u0131 kullanarak Google'da ilgili haberleri arayan yeni bir pencere a\u00e7ar. Bu t\u00fcr dinamik eylemler, kullan\u0131c\u0131lar\u0131n do\u011frudan grafik \u00fczerinden ba\u011flam\u0131na uygun bilgilere ve i\u015flevlere eri\u015fmesini sa\u011flayarak uygulaman\u0131n genel kullan\u0131\u015fl\u0131l\u0131\u011f\u0131n\u0131 ve de\u011ferini art\u0131r\u0131r. Ayr\u0131ca, men\u00fcdeki \u00f6\u011felerin aktif veya pasif durumunu, grafi\u011fin veya se\u00e7imin g\u00fcncel durumuna g\u00f6re dinamik olarak de\u011fi\u015ftirmek, kullan\u0131c\u0131 deneyimini daha da optimize edebilir. \u00d6rne\u011fin, hi\u00e7 veri yoksa \"Veriyi Excel'e Aktar\" se\u00e7ene\u011fini pasif hale getirebilirsiniz.<\/p>\n<h2>Geli\u015fmi\u015f Teknikler ve Performans \u0130pu\u00e7lar\u0131 Nelerdir?<\/h2>\n<p>\u00d6zel ba\u011flam men\u00fcs\u00fc eklemek, ba\u015flang\u0131\u00e7 seviyesi bir g\u00f6rev gibi g\u00f6r\u00fcnse de, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve kullan\u0131c\u0131 deneyimini en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in baz\u0131 ileri d\u00fczey teknikler ve optimizasyon stratejileri mevcuttur. Bu b\u00f6l\u00fcmde, men\u00fcn\u00fcn dinamik i\u00e7erik y\u00f6netimi, olay dinleyicilerinin etkin kullan\u0131m\u0131 ve mobil cihazlarda daha iyi bir deneyim sunmak i\u00e7in medya sorgular\u0131ndan nas\u0131l yararlan\u0131laca\u011f\u0131 gibi konulara odaklanaca\u011f\u0131z. Performans ve duyarl\u0131l\u0131k, modern web uygulamalar\u0131n\u0131n temel ta\u015flar\u0131d\u0131r ve \u00f6zel ba\u011flam men\u00fclerinizin de bu prensiplere uygun olmas\u0131 gerekmektedir. Kullan\u0131c\u0131lar, h\u0131zl\u0131 yan\u0131t veren ve her cihazda sorunsuz \u00e7al\u0131\u015fan uygulamalar\u0131 tercih ederler.<\/p>\n<h3>Mobil Uyumlu Ba\u011flam Men\u00fcleri \u0130\u00e7in Yakla\u015f\u0131mlar<\/h3>\n<p>Dokunmatik ekranl\u0131 cihazlarda sa\u011f t\u0131klama men\u00fcs\u00fc konsepti, fare tabanl\u0131 cihazlardaki kadar do\u011fal de\u011fildir. Bu nedenle, mobil uyumluluk i\u00e7in farkl\u0131 yakla\u015f\u0131mlar benimsemek \u00f6nemlidir. Birincil y\u00f6ntem, men\u00fc \u00f6\u011felerinin dokunmatik ekranlarda kolayca eri\u015filebilir olmas\u0131n\u0131 sa\u011flamak i\u00e7in CSS'deki medya sorgular\u0131n\u0131 kullanmakt\u0131r. Daha \u00f6nce <code>style.css<\/code> b\u00f6l\u00fcm\u00fcnde verdi\u011fimiz \u00f6rnekte oldu\u011fu gibi, daha k\u00fc\u00e7\u00fck ekran boyutlar\u0131nda men\u00fc \u00f6\u011felerinin dolgu (padding) ve font boyutlar\u0131n\u0131 art\u0131rabiliriz. Bu, parmakla t\u0131klamay\u0131 kolayla\u015ft\u0131r\u0131r ve yanl\u0131\u015f t\u0131klamalar\u0131 azalt\u0131r. Ayr\u0131ca, uzun basma (long-press) olaylar\u0131n\u0131 dinleyerek sa\u011f t\u0131klama men\u00fcs\u00fcn\u00fc tetiklemek, mobil cihazlarda daha sezgisel bir alternatif olabilir. JavaScript'te <code>touchstart<\/code>, <code>touchend<\/code> ve <code>touchmove<\/code> olaylar\u0131n\u0131 kullanarak uzun basma hareketini alg\u0131layabilir ve belirli bir s\u00fcre bas\u0131l\u0131 tutuldu\u011funda men\u00fcy\u00fc g\u00f6sterebilirsiniz. Bu, kullan\u0131c\u0131lar\u0131n mobil cihazlarda da benzer i\u015flevselli\u011fe eri\u015fmesini sa\u011flar ancak masa\u00fcst\u00fc deneyiminden farkl\u0131 bir etkile\u015fim modeli sunar. Bu adaptasyonlar, uygulaman\u0131z\u0131n farkl\u0131 cihazlarda tutarl\u0131 ve kullan\u0131\u015fl\u0131 bir deneyim sunmas\u0131na yard\u0131mc\u0131 olur.<\/p>\n<pre><code class=\"language-css\">\n\/* style.css i\u00e7inde mobil uyumlu \u00f6rnek *\/\n@media (max-width: 768px) {\n    .context-menu {\n        min-width: 180px; \/* Mobil i\u00e7in daha dar men\u00fc *\/\n        border-radius: 8px; \/* Daha yumu\u015fak k\u00f6\u015feler *\/\n    }\n    .context-menu ul li {\n        padding: 15px 20px; \/* Daha b\u00fcy\u00fck dokunma alan\u0131 *\/\n        font-size: 1rem; \/* Okunabilirli\u011fi art\u0131r *\/\n    }\n}\n  <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki CSS, mobil cihazlarda men\u00fcn\u00fcn g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc optimize ederken, JavaScript taraf\u0131nda uzun basma (long press) olay\u0131n\u0131 ele almak i\u00e7in a\u015fa\u011f\u0131daki gibi bir y\u00f6ntem kullan\u0131labilir:<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ script.js dosyas\u0131n\u0131n devam\u0131\nlet pressTimer;\nconst LONG_PRESS_THRESHOLD = 500; \/\/ 500ms\n\nchartContainer.addEventListener('touchstart', (e) => {\n    e.preventDefault(); \/\/ Varsay\u0131lan dokunma davran\u0131\u015f\u0131n\u0131 engelle\n    \/\/ E\u011fer sadece bir parmakla dokunulduysa\n    if (e.touches.length === 1) {\n        const touch = e.touches[0];\n        pressTimer = setTimeout(() => {\n            \/\/ Uzun basma ger\u00e7ekle\u015fti, men\u00fcy\u00fc g\u00f6ster\n            customContextMenu.style.top = touch.clientY + \"px\";\n            customContextMenu.style.left = touch.clientX + \"px\";\n            customContextMenu.style.display = \"block\";\n        }, LONG_PRESS_THRESHOLD);\n    }\n}, { passive: false }); \/\/ preventDefault'u kullanabilmek i\u00e7in passive: false\n\nchartContainer.addEventListener('touchend', () => {\n    clearTimeout(pressTimer);\n});\n\nchartContainer.addEventListener('touchmove', () => {\n    clearTimeout(pressTimer);\n    customContextMenu.style.display = \"none\"; \/\/ Dokunma kayarsa men\u00fcy\u00fc gizle\n});\n  <\/pre>\n<p><\/code><\/p>\n<p>Bu JavaScript kodu, <code>touchstart<\/code> olay\u0131n\u0131 dinleyerek bir zamanlay\u0131c\u0131 ba\u015flat\u0131r. E\u011fer kullan\u0131c\u0131 belirlenen s\u00fcre (<code>LONG_PRESS_THRESHOLD<\/code>) boyunca parma\u011f\u0131n\u0131 bas\u0131l\u0131 tutarsa, men\u00fc g\u00f6sterilir. <code>touchend<\/code> veya <code>touchmove<\/code> olaylar\u0131 ger\u00e7ekle\u015fti\u011finde ise zamanlay\u0131c\u0131 temizlenir ve men\u00fc gizlenir. Bu, mobil cihazlarda sa\u011f t\u0131klama men\u00fcs\u00fcne benzer bir etkile\u015fim sa\u011flar. Mobil cihazlarda men\u00fc \u00f6\u011feleri aras\u0131ndaki bo\u015flu\u011fu art\u0131rmak ve font boyutlar\u0131n\u0131 b\u00fcy\u00fctmek, kullan\u0131labilirli\u011fi art\u0131rman\u0131n anahtar\u0131d\u0131r. Ayr\u0131ca, men\u00fcn\u00fcn ekran\u0131n d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 engellemek i\u00e7in konumland\u0131rma mant\u0131\u011f\u0131n\u0131 da geli\u015ftirmek \u00f6nemlidir.<\/p>\n<h3>Dinleyicilerin Y\u00f6netimi ve Bellek Optimizasyonu<\/h3>\n<p>Bir web uygulamas\u0131nda olay dinleyicilerini etkin bir \u015fekilde y\u00f6netmek, performans ve bellek kullan\u0131m\u0131 a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. \u00d6zellikle dinamik olarak olu\u015fturulan veya kald\u0131r\u0131lan grafikler ve men\u00fclerle \u00e7al\u0131\u015f\u0131rken, \"memory leak\" (bellek s\u0131z\u0131nt\u0131s\u0131) riskini minimize etmek i\u00e7in olay dinleyicilerini do\u011fru \u015fekilde temizlemek \u015fartt\u0131r. Bir CanvasJS grafi\u011fi kald\u0131r\u0131ld\u0131\u011f\u0131nda veya sayfa de\u011fi\u015ftirildi\u011finde, grafik konteynerine ve men\u00fcye ekledi\u011fimiz olay dinleyicilerini <code>removeEventListener()<\/code> metodu ile kald\u0131rmam\u0131z gerekir. Aksi takdirde, DOM'dan kald\u0131r\u0131lan elementlere ait olay dinleyicileri bellekte gereksiz yere yer kaplamaya devam eder ve uygulaman\u0131z\u0131n zamanla yava\u015flamas\u0131na neden olabilir. \u00d6rne\u011fin, SPA (Single Page Application) mimarisinde, farkl\u0131 sayfalar aras\u0131nda ge\u00e7i\u015f yap\u0131ld\u0131\u011f\u0131nda \u00f6nceki sayfalara ait dinleyicilerin temizlenmesi \u00f6nemlidir.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ CanvasJS grafi\u011fini ve ba\u011flam men\u00fcs\u00fcn\u00fc kald\u0131rd\u0131\u011f\u0131n\u0131z bir senaryoda:\nfunction cleanupChartAndContextMenu() {\n    var chartContainer = document.getElementById(\"chartContainer\");\n    var customContextMenu = document.getElementById(\"customContextMenu\");\n\n    \/\/ Olay dinleyicilerini kald\u0131r\n    if (chartContainer) {\n        chartContainer.removeEventListener(\"contextmenu\", handleContextMenu);\n        chartContainer.removeEventListener(\"touchstart\", handleTouchStart);\n        chartContainer.removeEventListener(\"touchend\", handleTouchEnd);\n        chartContainer.removeEventListener(\"touchmove\", handleTouchMove);\n    }\n    if (document) {\n        document.removeEventListener(\"click\", handleClickOutsideMenu);\n    }\n    if (customContextMenu) {\n        customContextMenu.removeEventListener(\"click\", handleMenuItemClick);\n    }\n\n    \/\/ Gerekirse chart objesini de temizle\n    if (chart) {\n        chart.destroy(); \/\/ CanvasJS'in kendi temizleme metodu\n    }\n\n    \/\/ DOM elementlerini kald\u0131r\n    if (chartContainer) {\n        chartContainer.parentNode.removeChild(chartContainer);\n    }\n    if (customContextMenu) {\n        customContextMenu.parentNode.removeChild(customContextMenu);\n    }\n\n    console.log(\"CanvasJS grafi\u011fi ve ba\u011flam men\u00fcs\u00fc temizlendi.\");\n}\n\n\/\/ Yukar\u0131daki \u00f6rneklerde kullan\u0131lan olay dinleyicisi fonksiyonlar\u0131n\u0131 isimlendirmek \u00f6nemlidir:\n\/\/ chartContainer.addEventListener(\"contextmenu\", handleContextMenu);\n\/\/ function handleContextMenu(event) { ... }\n\/\/ document.addEventListener(\"click\", handleClickOutsideMenu);\n\/\/ function handleClickOutsideMenu(event) { ... }\n\/\/ customContextMenu.addEventListener(\"click\", handleMenuItemClick);\n\/\/ function handleMenuItemClick(event) { ... }\n  <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki \u00f6rnekte, olay dinleyicilerini isimlendirilmi\u015f fonksiyonlar kullanarak ekliyoruz (\u00f6rn: <code>handleContextMenu<\/code> yerine anonim fonksiyonlar kullanmak temizleme i\u015flemini zorla\u015ft\u0131r\u0131r). Daha sonra, <code>cleanupChartAndContextMenu<\/code> gibi bir fonksiyon i\u00e7inde bu dinleyicileri kald\u0131r\u0131yoruz. Bu y\u00f6ntem, uygulaman\u0131z\u0131n performans\u0131n\u0131 art\u0131r\u0131r, bellek kullan\u0131m\u0131n\u0131 optimize eder ve uzun vadede daha istikrarl\u0131 bir uygulama sa\u011flar. Ayr\u0131ca, \u00f6zellikle \u00e7ok say\u0131da grafik veya dinamik olarak olu\u015fturulan bile\u015fen i\u00e7eren uygulamalar i\u00e7in bu t\u00fcr bir temizlik rutini vazge\u00e7ilmezdir. Bu sayede uygulaman\u0131z, uzun s\u00fcreli kullan\u0131mlarda dahi ilk g\u00fcnk\u00fc performans\u0131n\u0131 koruyabilir.<\/p>\n<h2>Sonu\u00e7: CanvasJS ile S\u0131n\u0131rlar\u0131 Zorlamak ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Bu kapsaml\u0131 rehber boyunca, CanvasJS grafiklerinize sa\u011f t\u0131klama ile nas\u0131l \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyece\u011finizi ad\u0131m ad\u0131m \u00f6\u011frendik. Temel HTML yap\u0131s\u0131ndan CSS ile stilize etmeye, JavaScript ile olaylar\u0131 yakalamaktan men\u00fc \u00f6\u011felerine i\u015flevsellik katmaya kadar bir\u00e7ok konuyu ele ald\u0131k. Ayr\u0131ca, ger\u00e7ek d\u00fcnya senaryolar\u0131nda bu men\u00fcleri nas\u0131l kullanabilece\u011finizi ve mobil uyumluluk ile performans optimizasyonu i\u00e7in nelere dikkat etmeniz gerekti\u011fini de inceledik. \u00d6zel ba\u011flam men\u00fcleri, CanvasJS grafiklerinin etkile\u015fimli potansiyelini bir \u00fcst seviyeye ta\u015f\u0131yarak kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin g\u00fc\u00e7l\u00fc bir yoludur. Art\u0131k CanvasJS grafiklerinizle sadece veriyi g\u00f6stermekle kalmayacak, ayn\u0131 zamanda kullan\u0131c\u0131lar\u0131n\u0131za verilerle daha anlaml\u0131 ve sezgisel bir \u015fekilde etkile\u015fim kurma imkan\u0131 sunacaks\u0131n\u0131z. Bu, uygulaman\u0131z\u0131n genel de\u011ferini ve kullan\u0131\u015fl\u0131l\u0131\u011f\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\n<h3>Anahtar \u00c7\u0131kar\u0131mlar<\/h3>\n<ul>\n<li><strong>Kullan\u0131c\u0131 Deneyimi (UX):<\/strong> \u00d6zel men\u00fcler, ba\u011flama \u00f6zel eylemler sunarak kullan\u0131c\u0131lar\u0131n i\u015f ak\u0131\u015f\u0131n\u0131 h\u0131zland\u0131r\u0131r.<\/li>\n<li><strong>\u00d6zelle\u015ftirme:<\/strong> Tamamen kontrol\u00fcn\u00fczde olan men\u00fc tasar\u0131m\u0131 sayesinde uygulaman\u0131z\u0131n g\u00f6rsel diline uygun \u00e7\u00f6z\u00fcmler sunabilirsiniz.<\/li>\n<li><strong>Esneklik:<\/strong> JavaScript ile men\u00fc \u00f6\u011felerine kolayca dinamik i\u015flevsellikler ekleyebilir, verileri filtreleyebilir veya farkl\u0131 formatlarda d\u0131\u015fa aktarabilirsiniz.<\/li>\n<li><strong>Mobil Adaptasyon:<\/strong> Medya sorgular\u0131 ve uzun basma (long-press) gibi tekniklerle dokunmatik cihazlarda da tutarl\u0131 bir deneyim sunulabilir.<\/li>\n<li><strong>Performans:<\/strong> Olay dinleyicilerini do\u011fru y\u00f6netmek ve bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek, uygulaman\u0131z\u0131n uzun \u00f6m\u00fcrl\u00fc ve h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n<p>Bu teknikleri uygulayarak, sadece bir grafik g\u00f6r\u00fcnt\u00fcleyici olmaktan \u00f6te, kullan\u0131c\u0131lara ger\u00e7ekten de\u011fer katan interaktif ve g\u00fc\u00e7l\u00fc veri g\u00f6rselle\u015ftirme \u00e7\u00f6z\u00fcmleri sunabilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<dl>\n<dt>1. CanvasJS'in varsay\u0131lan sa\u011f t\u0131klama men\u00fcs\u00fc nas\u0131l tamamen gizlenir?<\/dt>\n<dd>CanvasJS'in kendi \u00f6zel bir sa\u011f t\u0131klama men\u00fcs\u00fc bulunmamaktad\u0131r; do\u011frudan taray\u0131c\u0131n\u0131n varsay\u0131lan men\u00fcs\u00fc tetiklenir. Bunu gizlemek i\u00e7in, grafik konteynerinizin <code>contextmenu<\/code> olay\u0131n\u0131 dinlemeli ve <code>event.preventDefault()<\/code> metodunu \u00e7a\u011f\u0131rmal\u0131s\u0131n\u0131z. Bu, taray\u0131c\u0131n\u0131n varsay\u0131lan men\u00fcs\u00fcn\u00fcn g\u00f6r\u00fcnmesini engeller ve kendi \u00f6zel men\u00fcn\u00fcz\u00fc g\u00f6sterebilmeniz i\u00e7in size kontrol sa\u011flar.<\/dd>\n<dt>2. Ba\u011flam men\u00fcs\u00fc i\u00e7eri\u011fini dinamik olarak nas\u0131l de\u011fi\u015ftiririm?<\/dt>\n<dd>Ba\u011flam men\u00fcs\u00fc i\u00e7eri\u011fini dinamik olarak de\u011fi\u015ftirmek i\u00e7in, men\u00fc g\u00f6sterilmeden \u00f6nce (yani <code>contextmenu<\/code> olay\u0131 tetiklendi\u011finde), JavaScript ile <code>customContextMenu<\/code> elementinin HTML i\u00e7eri\u011fini (<code>innerHTML<\/code>) veya men\u00fc \u00f6\u011felerinin stil \u00f6zelliklerini g\u00fcncelleyebilirsiniz. \u00d6rne\u011fin, belirli bir veri noktas\u0131na sa\u011f t\u0131kland\u0131\u011f\u0131nda sadece o veri noktas\u0131na \u00f6zel se\u00e7enekler g\u00f6sterilebilir veya baz\u0131 se\u00e7enekler pasif hale getirilebilir.<\/dd>\n<dt>3. Mobil cihazlarda sa\u011f t\u0131klama yerine hangi etkile\u015fimi kullanmal\u0131y\u0131m?<\/dt>\n<dd>Mobil cihazlarda sa\u011f t\u0131klama e\u015fde\u011feri olarak genellikle \"uzun basma\" (long-press) hareketi kullan\u0131l\u0131r. <code>touchstart<\/code>, <code>touchend<\/code> ve <code>touchmove<\/code> olaylar\u0131n\u0131 dinleyerek belirli bir s\u00fcre (\u00f6rne\u011fin 500 milisaniye) dokunmatik ekrana bas\u0131l\u0131 tutuldu\u011funda men\u00fcy\u00fc tetikleyebilirsiniz. Bu, dokunmatik ekranl\u0131 cihazlarda daha do\u011fal ve sezgisel bir kullan\u0131c\u0131 deneyimi sunar.<\/dd>\n<dt>4. Men\u00fcn\u00fcn sayfa d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 nas\u0131l engellerim?<\/dt>\n<dd>Men\u00fcn\u00fcn sayfa d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 engellemek i\u00e7in, men\u00fcn\u00fcn konumunu hesaplarken ekran boyutlar\u0131n\u0131 dikkate almal\u0131s\u0131n\u0131z. <code>event.clientX<\/code> ve <code>event.clientY<\/code> de\u011ferlerini kullanarak men\u00fcn\u00fcn varsay\u0131lan konumunu belirledikten sonra, men\u00fcn\u00fcn geni\u015fli\u011fi ve y\u00fcksekli\u011fini alarak ekran\u0131n sa\u011f ve alt kenarlar\u0131yla kar\u015f\u0131la\u015ft\u0131rabilirsiniz. E\u011fer men\u00fc ekran\u0131n d\u0131\u015f\u0131na ta\u015facaksa, <code>left<\/code> veya <code>top<\/code> de\u011ferlerini ayarlayarak men\u00fcn\u00fcn ekran i\u00e7inde kalmas\u0131n\u0131 sa\u011flayabilirsiniz (\u00f6rne\u011fin, <code>left = Math.min(event.clientX, window.innerWidth - customContextMenu.offsetWidth) + \"px\";<\/code>).<\/dd>\n<dt>5. CanvasJS grafi\u011findeki belirli bir veri noktas\u0131na sa\u011f t\u0131klama nas\u0131l alg\u0131lan\u0131r?<\/dt>\n<dd>CanvasJS'in do\u011frudan veri noktas\u0131na sa\u011f t\u0131klama olay\u0131 yoktur, ancak <code>chartContainer<\/code> \u00fczerinde sa\u011f t\u0131klamay\u0131 yakalad\u0131ktan sonra, <code>event.clientX<\/code> ve <code>event.clientY<\/code> koordinatlar\u0131n\u0131 kullanarak fare konumunun hangi veri noktas\u0131n\u0131n \u00fczerine geldi\u011fini tahmin edebilirsiniz. Bu genellikle CanvasJS'in kendi dahili API'si (varsa) veya manuel hesaplamalar gerektirir. Basit bir yakla\u015f\u0131m, genel grafi\u011fe sa\u011f t\u0131kland\u0131\u011f\u0131nda men\u00fcy\u00fc a\u00e7mak ve men\u00fcdeki i\u015flevleri t\u00fcm grafi\u011fin verileri \u00fczerinde uygulamak olabilir.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33652","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme<\/title>\n<meta name=\"description\" content=\"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme\" \/>\n<meta property=\"og:description\" content=\"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-05T11:01:20+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"30 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme\",\"datePublished\":\"2025-11-05T11:01:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\"},\"wordCount\":4539,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\",\"name\":\"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-05T11:01:20+00:00\",\"description\":\"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme","description":"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/","og_locale":"tr_TR","og_type":"article","og_title":"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme","og_description":"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.","og_url":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-05T11:01:20+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"30 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme","datePublished":"2025-11-05T11:01:20+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/"},"wordCount":4539,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/","url":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/","name":"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-05T11:01:20+00:00","description":"CanvasJS grafiklerine sa\u011f t\u0131klama ile \u00f6zel bir ba\u011flam men\u00fcs\u00fc ekleyerek kullan\u0131c\u0131 deneyimini zenginle\u015ftirin. Bu rehber, interaktif veri g\u00f6rselle\u015ftirmeleri olu\u015fturmak i\u00e7in ad\u0131m ad\u0131m yol g\u00f6sterir.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/canvasjs-grafiklerine-ozel-baglam-menusu-ekleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CanvasJS Grafiklerine \u00d6zel Ba\u011flam Men\u00fcs\u00fc Ekleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33652"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33652\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}