给本站的 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>
这是一个很酷的功能,比起简单的文字输出,更加直观清晰,并且可以做其他统计。