增加一个统计模块

2023/5/23·102 字·1 分钟阅读

butterfly

canvasJS的使用

这是前端的一个画各种表格的插件，十分好用哦！！官网地址在https://canvasjs.com/

新建一个js文件

// 将文章日期和数量存本地
var achivesDate = document.querySelectorAll('.card-archive-list-date'); var achivesDateNumber = document.querySelectorAll('.card-archive-list-count'); var achivesDateArr = []; var achivesDateNumberArr = [];
if (achivesDate.length) {
	for (var i = 0; i < achivesDate.length; i++) { achivesDateArr.push(achivesDate[i].innerHTML); achivesDateNumberArr.push(achivesDateNumber[i].innerHTML) }; localStorage.setItem('achivesDateArr', achivesDateArr); localStorage.setItem('achivesDateNumberArr', achivesDateNumberArr)
}
// 将分类信息存入本地
var cardCategoryListCountArr = []
var cardCategoryListNameArr = []
var cardCategoryListCount = document.querySelectorAll('.card-category-list-count')
var cardCategoryListName = document.querySelectorAll('.card-category-list-name')
if (cardCategoryListCount.length) {
	for (var i = 0; i < cardCategoryListCount.length; i++) {
		cardCategoryListCountArr.push(cardCategoryListCount[i].innerHTML)
		cardCategoryListNameArr.push(cardCategoryListName[i].innerHTML)
	}
	localStorage.setItem('card-category-list-count', cardCategoryListCountArr)
	localStorage.setItem('card-category-list-name', cardCategoryListNameArr)
}

记得引入至主题配置文件_config.yml中

新建页面

在根目录source目录下新建一个目录statistics，在其下面新建index.ejs文件增加如下内容即可：

---
title: 统计
---
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript" src="https://www.lazychild.fun/js/canvasJS.js"></script>
</head>

<body>
	<div id="chartContainer" style="height: 300px; width: 95%;"></div>
	<div id="chartContainer1" style="height: 300px; width: 95%;"></div>
	<script type="text/javascript">
		// 从本地获取文章数量和日期
		var achivesDateArr = localStorage.getItem('achivesDateArr').split(',').reverse()
		var achivesDateNumberArr = localStorage.getItem('achivesDateNumberArr').split(',').reverse()
		var cardCategoryListName = localStorage.getItem('card-category-list-name').split(',')
		var cardCategoryListCount = localStorage.getItem('card-category-list-count').split(',')
		// 文章
		var chart = new CanvasJS.Chart("chartContainer",
			{
				title: {
					text: "归档"
				},
				data: [

					{
						dataPoints: []
					}
				]
			});
		let initX = 1
		for (var i = 0; i < achivesDateArr.length; i++) {
			chart.options.data[0].dataPoints.push({
				x: initX,
				y: parseInt(achivesDateNumberArr[i]),
				label: achivesDateArr[i]
			})
			initX++
		}
		chart.render();


		// 分类
		var chart1 = new CanvasJS.Chart("chartContainer1",
			{
				legend: {
					maxWidth: 350,
					itemWidth: 120
				},
				title: {
					text: "分类"
				},
				data: [

					{
						type: "pie",
						showInLegend: true,
						legendText: "{indexLabel}",
						dataPoints: []
					}
				]
			});
		for (var i = 0; i < cardCategoryListName.length; i++) {
			chart1.options.data[0].dataPoints.push({
				y: parseInt(cardCategoryListCount[i]),
				indexLabel: cardCategoryListName[i]
			})
		}
		chart1.render();
	</script>
</body>

</html>

最后在增加一个导航栏

menu:
   统计: /statistics/ || icon-tongjitu