给 WordPress 绘制评论统计图

给本站的 WordPress 绘制了一个评论统计图!点击这里预览。代码主要是通过查询网站数据库,把输出的数据格式化,然后调用 Google Chart Api 绘制图形。

使用方法是新建一个页面模板,在类似 < ?php the_content();?> 前添加以下代码。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <h2>活跃用户排名</h2>
    <div id="chart_user_div" style="width:100%; height: 460px; margin: auto;"></div>
    <h2>评论数量折线图</h2>
    <div id="chart_day_div" style="width:100%; height: 500px; margin: auto;"></div>
    <h2>评论数量柱状图</h2>
    <div id="chart_month_div" style="width:100%; height: 500px; margin: auto;"></div>
        <?php
            global $wpdb;
            $numbers_day   = 120;
            $numbers_month = 13;
            $numbers_user  = 12;
            $query_day  ="SELECT COUNT(*) AS `cnt` , DATE_FORMAT( `comment_date` , '%Y-%m-%d' ) AS d FROM $wpdb->comments GROUP BY d ORDER BY `d` DESC LIMIT 0 , " . $numbers_day;
            $query_month="SELECT COUNT(*) AS `cnt` , DATE_FORMAT( `comment_date` , '%Y-%m' )    AS d FROM $wpdb->comments GROUP BY d ORDER BY `d` DESC LIMIT 0 , " . $numbers_month;
            $query_user ="
                SELECT
                COUNT( comment_author_email ) AS number,
                comment_author_email,
                comment_author
            FROM (
                SELECT *
                FROM $wpdb->comments
                LEFT OUTER JOIN $wpdb->posts
                ON ( $wpdb->posts.ID = $wpdb->comments.comment_post_ID )
                WHERE
                        comment_date > date_sub( NOW(), INTERVAL 360 DAY )
                    AND user_id = '0'
                    AND comment_approved =  '1'
                ORDER BY comment_ID DESC
            ) AS tempcmt
            GROUP BY comment_author_email
            ORDER BY number DESC
            LIMIT {$numbers_user}";
        $output_day   = $wpdb->get_results($query_day);
        $output_month = $wpdb->get_results($query_month);
        $output_user  = $wpdb->get_results($query_user);
    ?>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart_day);
        google.setOnLoadCallback(drawChart_month);
        google.setOnLoadCallback(drawChart_user);
        function drawChart_day() {
            var data = google.visualization.arrayToDataTable([
            ['date', 'comments'],
            <?php foreach (array_reverse($output_day) as $o) {echo "['" . $o->d . "'," . $o->cnt . "],";} ?>
            ]);
            var options = {
                title: '每日评论数图'
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_day_div'));
            chart.draw(data, options);
        }
        function drawChart_month() {
            var data = google.visualization.arrayToDataTable([
            ['date', 'comments'],
            <?php foreach (array_reverse($output_month) as $o) {echo "['" . $o->d . "'," . $o->cnt . "],";} ?>
            ]);
            var options = {
                title: '每月评论数图'
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('chart_month_div'));
            chart.draw(data, options);
        }
        function drawChart_user() {
            var data = google.visualization.arrayToDataTable([
            ['comment_author', 'comments'],
            <?php foreach ($output_user as $o) {echo "['" . $o->comment_author . "'," . $o->number . "],";} ?>
            ]);
            var options = {
                title: '一年内最活跃用户图'
            };
            var chart = new google.visualization.PieChart(document.getElementById('chart_user_div'));
            chart.draw(data, options);
        }
</script>

其中以上引用的 js 文件由于使用了谷歌家的服务可能会无法访问,可以下载到本地后再引用比如本站是这样的:

  <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jsapi.js"></script>

《给 WordPress 绘制评论统计图》
这是一个很酷的功能,比起简单的文字输出,更加直观清晰,并且可以做其他统计。

刚刚发现手机浏览器没办法显示绘制的图,也不知道哪里错了。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

  1. 雨天 雨天 说道:

    你好,出现个问题。最活跃用户图,怎么只显示一个信息100%,哪里出错了?这个代码的sql查询语句有问题吗,还是不兼容新版本wordpress了?站长看到请回复一下

    1. 雨天 雨天 说道:

      大佬,等你指教呢

  2. boke112联盟 说道:

    这个功能很酷炫啊

    1. 黑鸟 说道:

      太消耗资源了,再多来几个人点估计服务器都要爆炸,过过折腾的瘾就好。

  3. Lvtu 说道:

    GG的jsapi被墙了,可以换成这个:https://www.gstatic.com/charts/loader.js ......

    1. 黑鸟 说道:

      已经替换为本地了 :006:

      1. Lvtu 说道:

        我这里看到的是如果不翻墙,你那个统计页面的统计还是不显示。。。。 :007:

        1. 黑鸟 说道:

          我去,替换为你提供的地址还真可以了 :030:

        2. 黑鸟 说道:

          下载“https://www.google.com/jsapi”直接上传服务器作为本地调用还是是不行的,文件里面还不够完整,还需要连接谷歌的服务器,我电脑上常年挂着小灰机,估计是这个影响了,感谢大佬指点。

          1. Lvtu 说道:

            不可以敢给你, 哈哈! :010: