[برای ۱.۸] اضافه کردن آمار گرافیکی و متحرک به بخش آمار انجمن

[saeed_same]

این هم یک نمونه از آمار زیبا برای انجمن

ابتدا به بخش قالب امار رفته و بعد از کد {$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 اپلود کنید


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


نمونه انلاین

تا اونجایی که تونستم درست کردم. تو نمونه خارجی   عکس کاملا سمت چپ نشون میده و نوشته ها به درستی نمایش نشون داده نمیشه
 دوستانی که میتونن متن رو فارسی کامل قرار بدن اموزشش رو بذارن