先导
之前使用canvaJS已经写过了一个统计页面，但是我觉得样式不够好看，于是又去找图表框架，发现chart.js还挺好看，这里就不说怎么创建一个统计页面了，我不可能所有文章都从最最最基础的讲起的，作者也开始摆烂咯，哈哈哈哈！！！（主要是写教程没经济来源）
找到教程
教程：Chart.js · GitBook (bootcss.com)
本教程会使用到webpack, 不知道什么是webpack的，可以先去看一下，官网在：webpack，用于解决模块化导入问题。我觉得很多小伙伴是不是卡在这里了呢？看到这里你是不是觉得很懵，为什么能直接在自己博客的目录下安装chart.js, 然后直接引用，
哈哈哈哈，hexo可不支持模块化哦！，看以后会不会支持吧，反正不管怎样都要使用webpack去打包，生成一个可用的js文件
安装webpack
在一个空文件夹中
npm i webpacknpm i webpack-cli安装chart.js
npm i chart.js新建一个src目录
在此目录新建main.js, 主要用于写chart.js的配置
内容如下：
import Chart from "chart.js/auto";
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});注意chart.js的引用：import Chart from “chart.js/auto”;
配置webpack的打包信息
新建文件webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/main.js', // 项目的入口文件路径
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js' // 构建后的文件路径和文件名
}
};执行命令：
npx webpack执行后生成一个dist文件夹
创建html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script src="./dist/bundle.js"></script>
</body>
</html>用浏览器打开应该就成功了
最后在根据我之前的那篇文章：增加一个统计模块 | Lazychild's Blog，可以获取本地的一些数据，将图表的数据与博客数据关联起来，最后将自己生成的js文件与html页面移植到自己的博客项目中即可