cfanlost2020-04-18 10:42:16

:rolleyes: 激发了广大网友的评论热情。+1

前段时间无意在网友“牧羊人”那里见到这个，发现非常酷，于是弄过来用上了。

牧羊人：https://www.shephe.com/2015/07/wordpress-comment-chart

效果如下图：

其实方法网上很多，感觉没有贴出来的必要的，但今天在另一个网友那里看到他在折腾这个，发现他遇到和我当初一样的问题：如果不翻墙的话，图表有时会显示不出来。

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

把上面的代码放入主题下的新建页面模版或者其它你想放入的页面中即可。数据和样式可以根据自己的主题和需要修改。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

到这里基本就可以了，但因为GG服务被墙的原因，有时图表并不会出现。最后经过Lvtu各种折腾和测试，终于在网上找到了一个解决办法：

相关使用介绍：https://stackoverflow.com/questions/54248514/google-chart-using-https-www-gstatic-com-charts-loader-js

把上面GG的JS文件替换为下面的就可以了，当然为了避免失效，可以把JS文件放到自己服务器上来：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

刷新一下是不是可以了，详细效果可以见本站导航 >> 实验室 >> 评论统计， 在此对在本站留下痕迹的朋友表示真挚的感谢，感谢大家的不离不弃。。。。。。

这段时间没事在网站上折腾花了不少时间，改字体本来没当一回事，结果导致网站标题和副标题不显示，刚开始以为是其它原因，排查来排查去最后发现是字体和text-fill-color冲突。

同时把默认的播放器改成了类似微信公众号那样的样式, 只是歌曲时间倒计时没解决。效果见文章开篇。

内容较多的文章增加了一个类似BD百科那样的目录样式。效果见 ===> 传送门。

列表页改了一下显示方式（主题自带），但对一些细节样式做了下修改。原来的大图加摘要显示方式用了很长一段时间了，适当切换改善一下视觉疲劳感。:-)))))

给文章页加了一个初始不完全显示，点击“阅读全文”才全部显示的效果，这样打开文章页的方式或许会舒服点。在折腾中意外发现因为新增”overflow:hidden”的原因，而导致之前定义的margin负值失效，后果就是又折腾半天才找到用JS解决。

展开阅读全文

其它就是细节上的CSS样式修改了，貌似都是视觉上的修改，具体也不知道改了哪里，会不会影响哪里，边看边折腾吧。

刚刚又把评论改成了使用ajax无刷新提交的方式，希望这样体验感好点。