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

کد 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(0deg) translate3d(0,0,0);}}
main{width:400px;margin:30px auto;}
section{margin-top:30px;}
.pieID{display:inline-block;vertical-align: top;}
.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-->

کد:

<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>

کد:

<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>