هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.22 MyBB منتشر شد



امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[برای ۱.۸] اضافه کردن آمار گرافیکی و متحرک به بخش آمار انجمن
#1
با درود
راهکاری برای زیباتر کردن انجمن ساز مای بی بی برای دوستان قرار میدهم . نخست به بخش آمار انجمن خودتان نگاهی بیاندازید و سپس اینجا را ببینید . در تصویر زیر نمونه ی اصلی و پیش فرض آمار را می توانید ببینید .

تصویر آمار پیش فرض
[تصویر:  1.8.png]


و در تصویر زیر نتیجه ی این راهکار را میتوانید ببینید. آمار گرافیکی زیر بصورت متحرک نمایش داده می شود . (نمونه ی زنده را در اینجا ببینید)

تصویر نهایی پس از راهکار

[تصویر:  1.8.png]


اگر متوجه اختلاف شدید و میخواهید مانند تالار میدوری دارای آمار گرافیکی باشید دست بکار شوید و مراحل زیر را گام به گام اجرا کنید .

توجه کنید که این کار در دو نگارش مای بی بی یعنی نگارش های 1.6و 1.8 با هم  کمی اختلاف دارند برای اجرای این راهکار در انجمن ساز نگارش 1.6 به اینجا بروید (چون نگارش 1.6 در اینجا جایی ندارد) .

برای داشتن آمار گرافیکی نخست به مسیر زیر بروید
کنترل پنل مدیریت > قالب ها و پوسته > قالب ها > قالب مورد نظر > قالب‌های آمــار > بخش stats
و کدهای زیر را پیدا کنید
کد php:
<td class ="trow1" rowspan="3" valign="top">
{
$lang->ppd} <strong>{$postsperday}</strong><br />
{
$lang->tpd} <strong>{$threadsperday}</strong><br />
{
$lang->mpd} <strong>{$membersperday}</strong><br />
{
$lang->ppm} <strong>{$postspermember}</strong><br />
{
$lang->rpt} <strong>{$repliesperthread}</strong>
</
td

کدهای زیر را جایگزین کدهای بالا کنید

کد php:
<!--new stats begin-->
<
style>
@
keyframes bake-pie{from{transform:rotate(0degtranslate3d(0,0,0);}}
main{width:400px;margin:30px auto;}
section{margin-top:30px;}
.
pieID{display:inline-block;vertical-aligntop;}
.
pie{height:200px;width:200px;position:relative;margin:0 30px 30px 0;}
.
pie::before{content:"";display:block;position:absolute;z-index:1;width:100px;height:100px;background:#EEE;border-radius:50%;top:50px;left:50px;}
.pie::after{content:"";display:block;width:120px;height:2px;background:rgba(0,0,0,0.1);border-radius:50%;box-shadow:0 0 3px 4px rgba(0,0,0,0.1);margin:220px auto;}
.
slice{position:absolute;width:200px;height:200px;clip:rect(0px,200px,200px,100px);animation:bake-pie 1s;}
.
slice span{display:block;position:absolute;top:0;left:0;background-color:black;width:200px;height:200px;border-radius:50%;clip:rect(0px,200px,200px,100px);}
.
legend{list-style-type:none;padding:0;margin:0;background:#FFF;padding:15px;font-size:13px;box-shadow:1px 1px 0 #DDD, 2px 2px 0 #BBB;}
.legend li{width:250px;height:1.25em;margin-bottom:0.7em;padding-left:0.5em;border-left:1.25em solid black;}
.
legend em{font-style:normal;}
.
legend span{float:left;}
</
style>
<
td class ="trow1" rowspan="3" valign="top">
<
section><div class ="pieID pie"></div>
<
ul class ="pieID legend">
<
li>{$lang->ppd}<span>{$postsperday}</span></li>
<
li>{$lang->tpd}<span>{$threadsperday}</span></li>
<
li>{$lang->mpd}<span>{$membersperday}</span></li>
<
li>{$lang->ppm}<span>{$postspermember}</span></li>
<
li>{$lang->tpm}<span>{$threadspermember}</span></li>
<
li>{$lang->rpt}<span>{$repliesperthread}</span></li>
</
ul></section>
</
td>
</
main>
<
script type="text/javascript" src="{$mybb->settings['bburl']}/js/index.js"></script>
<!--new 
stats end--> 

گام دوم: پوشه ی موجود در فایل فشرده را در هاست خودتان آپلود کنید.


.zip   js.zip (اندازه: 923 bytes / تعداد دفعات دریافت: 15)

کار تمام است . امید که بکار بیاید.

منبع : http://www.midorinco.ir/showthread.php?tid=1669
برگرفته از : http://community.mybb.com/thread-190163.html
پاسخ
 سپاس شده توسطmotorola30 (۱۳۹۵/۲/۲۵، ۲۳:۳۵:۵۵ عصر) ، MISTER (۱۳۹۵/۲/۲۵، ۲۳:۴۴:۵۸ عصر) ، saeed_same (۱۳۹۵/۲/۲۵، ۲۳:۵۶:۱۹ عصر) ، aliii (۱۳۹۵/۲/۲۶، ۱۱:۱۱:۴۸ صبح) ، ashpazkhanoom (۱۳۹۵/۲/۲۶، ۱۱:۱۸:۲۸ صبح) ، HOssE!N-B (۱۳۹۵/۲/۲۶، ۱۳:۱۵:۵۵ عصر)
#2
سلام
ممنونم بابت این کد زیبا
تمام کارهایی گفته شده رو به درستی انجام دادم اما در صفحه اصلی انجمنم این ارور رو میده.
[تصویر:  Capture8585858.PNG]
پاسخ
#3
درود

تغییراتی رو که اعمال کردید بازگردانید و منتظر میدوری عزیز باشید تا پاسخگویی این مشکل باشند
کوپن تخفیف محصولات فروشگاه فـارس مـارک : mybbiran.com
پاسخ
 سپاس شده توسطمیدوری (۱۳۹۵/۲/۲۷، ۰۷:۱۵:۴۹ صبح)
#4
برگردوندم اما درست نشد. Sad
پاسخ
#5
این ایراد مربوط به این راهکار نیست چون بخش آمار با صفحه ی اصلی ارتباط ندارد که جلوگیری از بالا آمدن سایت بکند . آدرسی که در ارور داده را بررسی کنید و ببینید فایلی را اشتباهی پاک نکرده باشید چون اخطار از نبود فایل حکایت دارد. Heart
========================
سایتتون که درست شده و آمار هم بخوبی کار میکند . Big Grin
پاسخ
#6
سلام
خیلی ممنونم.
نمیدونم چرا یک دفعه ای اینطوری شد. هیچ کاری هم نکردم!!!
همین چند دقیقه پیش خودم دست به کار شدم و فایل ایندکس رو حذف و مجددا از بسته مای بی بی آپلود کردم. فعلا که حل شده. (اینو گفتم تا اگه کسی مشکل منو داشت بتونه مشکلشو حل کنه)
ممنونم آقای میدوری
پاسخ
 سپاس شده توسطمیدوری (۱۳۹۵/۲/۲۷، ۰۷:۱۵:۳۷ صبح)
#7
این هم یک نمونه از آمار زیبا برای انجمن

ابتدا به بخش قالب امار رفته و بعد از کد {$headerinclude} کد زیر را قرار دهید

کد:
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

و یا کد جاوااسکریپت رو برای بارگذاری بیشتر به انجمن اپلود کنید و کد زیر را قرار دهید

کد:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/canvasjs.min.js"></script>


کد زیر را در امار پیدا کرده

کد:
<td class="trow1" rowspan="3" valign="top">
{$lang->ppd} <strong>{$postsperday}</strong><br />
{$lang->tpd} <strong>{$threadsperday}</strong><br />
{$lang->mpd} <strong>{$membersperday}</strong><br />
{$lang->ppm} <strong>{$postspermember}</strong><br />
{$lang->tpm} <strong>{$threadspermember}</strong><br />
{$lang->rpt} <strong>{$repliesperthread}</strong>
</td>


و به کد زیر تغییر دهید

کد:
<td class="trow1" rowspan="3" valign="top">
<div id="piechart" style="height: 300px; width: 100%;">
</td>


و کد زیر را بعد از تگ </body> قرار دهید

کد:
<script>          
       CanvasJS.addColorSet("pie",
               [

               "#2F4F4F",
               "#008080",
               "#2E8B57",
               "#3CB371",
               "#90EE90",
               "#636F57"
               ]);
         
window.onload = function () {
   var chart = new CanvasJS.Chart("piechart",
   {
       backgroundColor: "#1F1F1F",
       colorSet:  "pie",
       title:{
           text: ""
       },
               animationEnabled: true,
       legend:{
           verticalAlign: "center",
           horizontalAlign: "right",
           fontSize: 20,
           fontFamily: "Helvetica",      
               fontColor: "white"
       },
       theme: "theme2",
       data: [
       {        
           type: "pie",      
           indexLabelFontFamily: "Garamond",      
           indexLabelFontSize: 20,
           indexLabel: "{label} {y}",
           startAngle:-20,      
           showInLegend: true,
           toolTipContent:"{legendText} {y}",
           dataPoints: [
               {  y: {$postsperday}, legendText:"Posts per day", label: "" },
               {  y: {$threadsperday}, legendText:"Threads per day", label: "" },
               {  y: {$membersperday}, legendText:"Members per day", label: "" },
               {  y: {$postspermember}, legendText:"Posts per member" , label: ""},      
               {  y: {$threadspermember}, legendText:"Threads per member" , label: ""},
               {  y: {$repliesperthread}, legendText:"Replies per thread" , label: ""}
           ]
       }
       ]
   });
   chart.render();
}
 </script>


پیوست زیر رو دانلود و در پوشه jscripts اپلود کنید


.zip   canvasjs.min.zip (اندازه: 62.06 KB / تعداد دفعات دریافت: 0)


نمونه انلاین

تا اونجایی که تونستم درست کردم. تو نمونه خارجی   عکس کاملا سمت چپ نشون میده و نوشته ها به درستی نمایش نشون داده نمیشه
 دوستانی که میتونن متن رو فارسی کامل قرار بدن اموزشش رو بذارن Heart
پاسخ
 سپاس شده توسطMISTER (۱۳۹۵/۲/۲۸، ۱۱:۱۰:۴۶ صبح) ، ashpazkhanoom (۱۳۹۵/۲/۲۸، ۱۱:۱۹:۱۲ صبح) ، میدوری (۱۳۹۵/۲/۲۸، ۱۶:۰۵:۲۳ عصر)


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 2 مهمان