💪🏼 😠 🔉 राफेल और PHP का उपयोग करके SVG पाई चार्ट उदाहरण ❕ 🥘 ☘️

हमारी परियोजनाओं में से एक के विकास के दौरान, हमें क्लाइंट html में बड़ी संख्या में ग्राफिक्स को प्रस्तुत करने की आवश्यकता का सामना करना पड़ा। सर्वर पर लोड को कम करने के दृष्टिकोण से, क्लाइंट पक्ष पर तीन आयामी ग्राफिक्स का निर्माण एकमात्र सही निर्णय है। इस क्षेत्र से तैयार और उपयुक्त जेएस समाधानों की खोज करते समय, हमने राफेल जेएस लाइब्रेरी पर पूरी तरह से अंकुश लगाया, जिससे सभी मौजूदा ब्राउज़रों में वेक्टर ग्राफिक्स खींचना आसान हो गया। कार्यक्षमता को समझने और मुख्य प्रकार के आरेख बनाने के लिए कई कार्यों को डिबग किया, हमने अपनी सर्वोत्तम प्रथाओं को यहां साझा करने का निर्णय लिया।

राफेल और PHP का उपयोग करके SVG पाई चार्ट उदाहरण

So. नीचे वर्णित उदाहरण राफेल और PHP का उपयोग करके छवि में दिखाए गए एसवीजी प्रारूप पाई चार्ट का निर्माण करता है। हमने उन सभी की मदद के लिए जितना संभव हो उतना स्रोत कोड का वर्णन करने की कोशिश की, जो इसे अपने दम पर पता लगाने की ताकत या समय नहीं पा सके।

Circle.php फ़ाइल:

<?php //        , //        function start_paper($id, $width, $height) { return 'var r = Raphael("' .$id .'", ' .$width .', ' .$height .');'; } //    function paper_circle_chart($params) { //   ""     //   3D    $shadow_width = floor(($params['radius']-$params['inradius'])*0.47); $pradius = $params['radius'] - $shadow_width; //     $outradius = $params['radius'] + $params['text_radius']; //   $total = array_sum($params['data']); $i = 0; $prev = 0; $fangel = 0; $code = ''; $pcode = ''; $pline = ''; $ptext = ''; $pstext = ''; $center = ''; $begin = true; //      foreach ($params['data'] as $k => $v) { //     $color = $params['colors'][$i]; //      if ($v == 0) { $i++; continue; } //       -    elseif ($v == $total) { $pend = deg2rad(45); $code = ' r.circle(' .$params['centerx'] .', ' .$params['centery'] .', ' .$params['radius'] .').attr({"fill": "' .$color .'"})'; if (count($params['texts'])) { $dxc = round($params['centerx'] + $pradius * sin($pend), 2); $dyc = round($params['centery'] - $pradius * cos($pend), 2); $dxc1 = round($params['centerx'] + $outradius * sin($pend), 2); $dyc1 = round($params['centery'] - $outradius * cos($pend), 2); $dxc2 = $dxc1 + $params['text_width']; $dxc3 = $dxc1 + round($params['text_width']/2, 2); $dyc2 = $dyc1 - $params['text_minus']; $dyc3 = $dyc1 + $params['text_plus']; $pcode .= ' r.circle(' .$dxc .', ' .$dyc .', ' .$params['point_radius'] .')'; $pline .= ' r.path("M'. $dxc .','. $dyc .' L'. $dxc1 .','. $dyc1 .' L'. $dxc2 .','. $dyc1 .'")'; $ptext .= ' r.text(' .$dxc3 .', ' .$dyc2 .', "100 %")'; $pstext .= ' r.text(' .$dxc3 .', ' .$dyc3 .', "' .$params['texts'][$i] .'")'; } } //  -    else { $percent = $v / $total; $angel = 360 * $percent; $rad = deg2rad($angel); $end = $prev + $rad; $pend = $prev + $rad/2; $dx = round($params['centerx'] + $params['radius'] * sin($prev), 2); $dy = round($params['centery'] - $params['radius'] * cos($prev), 2); $dxp = round($params['centerx'] + $params['radius'] * sin($end), 2); $dyp = round($params['centery'] - $params['radius'] * cos($end), 2); if ($percent > 0.5) $sec = 1; else $sec = 0; if (!$begin) $code .= ','; $code .= ' r.path("M' .$params['centerx'] .',' .$params['centery'] .' L' .$dx .',' .$dy .' A' .$params['radius'] .',' .$params['radius'] .' 0 ' .$sec .',1 ' .$dxp .',' .$dyp .' z").attr({"fill": "' .$color .'"})'; if (count($params['texts'])) { $dxc = round($params['centerx'] + $pradius * sin($pend), 2); $dyc = round($params['centery'] - $pradius * cos($pend), 2); $dxc1 = round($params['centerx'] + $outradius * sin($pend), 2); $dyc1 = round($params['centery'] - $outradius * cos($pend), 2); if (($fangel + $angel/2) > 180) { $dxc2 = $dxc1 - $params['text_width']; $dxc3 = $dxc1 - round($params['text_width']/2, 2); } else { $dxc2 = $dxc1 + $params['text_width']; $dxc3 = $dxc1 + round($params['text_width']/2, 2); } $dyc2 = $dyc1 - $params['text_minus']; $dyc3 = $dyc1 + $params['text_plus']; if (!$begin) { $pcode .= ','; $ptext .= ','; $pstext .= ','; $pline .= ','; } $pcode .= ' r.circle(' .$dxc .', ' .$dyc .', ' .$params['point_radius'] .')'; $pline .= ' r.path("M'. $dxc .','. $dyc .' L'. $dxc1 .','. $dyc1 .' L'. $dxc2 .','. $dyc1 .'")'; $ptext .= ' r.text(' .$dxc3 .', ' .$dyc2 .', "' .round($percent * 100) .' %")'; $pstext .= ' r.text(' .$dxc3 .', ' .$dyc3 .', "' .$params['texts'][$i] .'")'; } $i++; $begin = false; $prev = $end; $fangel += $angel; } } //   ""     if ($code) $code = ' var st = r.set(); st.push(' .$code .' ); st.attr({"stroke": "none"});'; //   ""     if ($pline) $pline = ' var st = r.set(); st.push(' .$pline .' ); st.attr({"stroke": "' .$params['line_color'] .'"});'; //   ""  " "      if ($pcode) $pcode = ' var st = r.set(); st.push(' .$pcode .' ); st.attr({"fill": "' .$params['text_color'] .'", "stroke": "' .$params['stroke_color'] .'"});'; //   "", ""  ""      if ($ptext) $ptext = ' var st = r.set(); st.push(' .$ptext .' ); st.attr({"font-family": "' .$params['font'] .'", "font-size": "' .$params['text_name'] .'", "fill": "' .$params['text_color'] .'", "cursor": "default"});'; //   "", ""  ""      if ($pstext) $pstext = ' var st = r.set(); st.push(' .$pstext .' ); st.attr({"font-family": "' .$params['font'] .'", "font-size": "' .$params['text_small'] .'", "fill": "' .$params['text_color'] .'", "cursor": "default"});'; //        $inradius = ''; if ($params['inradius'] > 0) { $inradius = ' r.circle(' .$params['centerx'] .', ' .$params['centery'] .', ' .$params['inradius'] .').attr({"fill": "' .$params['center_text_back'] .'", "stroke": "none"});'; if ($params['shadow']) $inradius .= ' r.circle(' .$params['centerx'] .', ' .$params['centery'] .', ' .($params['radius']-$shadow_width+floor($shadow_width/2)) .').attr({"fill": "none", "stroke": "#FFFFFF", "stroke-width": "' .$shadow_width .'", "stroke-opacity": "0.15"});'; if ($params['center_text']) { $center = ' r.text(' .$params['centerx'] .', ' .$params['centery'] .', "' .$params['center_text'] .'").attr({"font-family": "' .$params['font'] .'", "font-size": "' .$params['center_text_size'] .'", "fill": "' .$params['center_text_color'] .'", "cursor": "default"});'; } } return $code .$inradius .$pline .$pcode .$ptext .$pstext .$center; } ?>

फ़ाइल परीक्षण। Php:

 <?php include("circle.php"); $params = array ( //   'font' => 'PT Sans, Tahoma', //  'text_color' => '#212121', //   'line_color' => '#494949', //    'text_width' => 40, //      'text_radius' => 14, //         'point_radius' => 3, //     (          ) 'stroke_color' => '#EFEFEF', //    'text_name' => 13, //      'text_small' => 11, //      'text_minus' => 10, //       'text_plus' => 8, //       'centerx' => 100, //     x 'centery' => 100, //     y 'radius' => 42, //    'inradius' => 19, //    'center_text_back' => '90-#e7e7e7-#ffffff:60', //    'center_text' => 416, //      'center_text_size' => 14, //       'center_text_color' => '#212121', //       'data' => array( //   139, 112, 89, 76), 'texts' => array ( //   ,     '', '', ' ', '' ), 'colors' => array ( //   '0-#08b2ff-#0e56d4', '0-#fffa17-#ffba17', '0-#e0070e-#f15722', '0-#BCE408-#5FBB00' ), 'shadow' => 1 //    3D    ); //  ,  <head></head>  js ,  <body></body> - <div></div> // c       start_paper() $head = start_paper('diagram', 200, 200) .paper_circle_chart($params); $body = '<div id="diagram"></div>'; echo ' <!DOCTYPE html> <html> <head> <title>  SVG   Raphael  PHP</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="/raphael-min.js"></script> <script> window.onload = function () {' .$head .' }; </script> </head> <body>' .$body .' </body> </html>'; ?>

उपरोक्त स्रोत कोड पूरी तरह से चालू है। हर कोई जो गहरी खुदाई करना चाहता है और अपने दम पर प्रस्तुत सामग्री को समझना चाहता है, वह लाइब्रेरी को डाउनलोड कर सकता है और तीन फाइलों (सर्कल. एफपी, टेस्ट. एफपी और राफेल-मिन.जेएस) को एक ही में इकट्ठा कर सकता है।

यहां दिए गए उदाहरण का डेमो।
हमारी परियोजना से अधिक स्पष्ट और विविध उदाहरण यहां है ।

इस पुस्तकालय के कार्यों के बारे में राफेल सिंटैक्स और अन्य बिंदुओं के संदर्भ में ग्रेडिएंट भरण (0- # BCE408- # 5FBB00) कैसे काम करता है और उनके मापदंडों को प्रलेखन में पर्याप्त विवरण में वर्णित किया गया है । वैसे, इस समाधान के विस्तृत प्रलेखन, विस्तृत कार्यक्षमता और क्रॉस-ब्राउज़र संगतता, हमारे दृष्टिकोण से, समान उपकरणों पर इस पुस्तकालय का निर्विवाद लाभ है।

हम आशा करते हैं कि हमारा अनुभव उन सभी के लिए उपयोगी होगा जिन्होंने पहली बार JS टूल्स का उपयोग करके html में वेक्टर ग्राफिक्स बनाने का काम किया था। हम इस विषय पर सभी सवालों और टिप्पणियों का जवाब देने की कोशिश करेंगे।

राफेल और PHP का उपयोग करके SVG पाई चार्ट उदाहरण

More articles: