GPT-Crawler与数据可视化：爬取结果图表展示

苗伊姬Desmond

996人浏览 · 2025-09-12 02:57:51

苗伊姬Desmond · 2025-09-12 02:57:51 发布

GPT-Crawler与数据可视化：爬取结果图表展示

【免费下载链接】gpt-crawler Crawl a site to generate knowledge files to create your own custom GPT from a URL 项目地址: https://gitcode.com/GitHub_Trending/gp/gpt-crawler

引言：数据爬取的可视化困境

你是否曾面对这样的场景：使用GPT-Crawler爬取数十甚至数百个网页后，得到一个巨大的JSON文件，却难以快速把握数据全貌？当爬取页面数量超过50页时，人工分析JSON结构变得异常困难——哪些页面内容最丰富？爬取深度是否符合预期？不同类型页面的分布如何？这些问题往往需要通过复杂的数据解析才能回答。本文将展示如何将GPT-Crawler的原始爬取结果转化为直观的可视化图表，帮助开发者在3分钟内掌握数据特征。

读完本文你将获得：

爬取数据的结构化分析方法
5种核心可视化图表的实现方案
基于图表的爬取质量评估指南
完整的Node.js可视化代码实现

GPT-Crawler数据结构解析

核心数据模型

GPT-Crawler的爬取结果以JSON格式存储，每个条目包含三个关键字段：

字段名	类型	描述
title	string	页面标题
url	string	爬取页面URL
html	string	提取的页面文本内容

以下是典型的爬取结果示例：

[
  {
    "title": "GPT-Crawler Documentation",
    "url": "https://example.com/docs",
    "html": "This is the main documentation page..."
  },
  {
    "title": "Installation Guide",
    "url": "https://example.com/docs/install",
    "html": "Step-by-step installation instructions..."
  }
]

数据特征提取

为实现可视化，我们需要从原始数据中提取以下特征：

页面深度：URL层级结构反映的网站深度
内容长度：HTML文本的字符数统计
标题关键词：从标题中提取的核心主题词
爬取时间：页面被爬取的时间戳（需开启日志记录）

可视化实现方案

技术栈选择

本方案采用Node.js生态中的数据处理与可视化工具链：

mermaid

核心依赖包安装：

npm install lodash cheerio chart.js canvas

1. 爬取页面分布热力图

该图表展示不同URL路径下的页面分布密度，帮助识别爬取重点区域：

const { createCanvas } = require('canvas');
const { groupBy } = require('lodash');
const fs = require('fs');

// 读取爬取结果
const rawData = JSON.parse(fs.readFileSync('output.json', 'utf8'));

// 提取URL路径层级
const pathLevels = rawData.map(item => {
  const urlParts = new URL(item.url).pathname.split('/').filter(Boolean);
  return urlParts.length;
});

// 生成路径深度分布数据
const depthDistribution = groupBy(pathLevels);

// 创建热力图
const canvas = createCanvas(800, 400);
const ctx = canvas.getContext('2d');
// ...Chart.js绘图代码...

// 保存图表
fs.writeFileSync('depth-heatmap.png', canvas.toBuffer());

2. 内容长度分布直方图

展示页面内容长度的分布情况，识别异常短或异常长的页面：

mermaid

代码实现关键点：

// 计算内容长度
const contentLengths = rawData.map(item => item.html.length);

// 设置区间断点
const bins = [0, 1000, 3000, 5000, 10000, Infinity];
const labels = ['0-1k', '1k-3k', '3k-5k', '5k-10k', '10k+'];

// 统计区间分布
const distribution = contentLengths.reduce((acc, len) => {
  const binIndex = bins.findIndex(bin => len <= bin) - 1;
  acc[binIndex >= 0 ? binIndex : bins.length - 2]++;
  return acc;
}, Array(bins.length - 1).fill(0));

3. URL聚类树状图

展示URL结构的层级关系，直观呈现网站信息架构：

mermaid

4. 爬取效率折线图

跟踪爬取过程中的页面响应速度变化：

mermaid

5. 关键词云图

从页面标题中提取高频关键词，识别网站核心主题：

const cheerio = require('cheerio');
const { countBy, toPairs, orderBy } = require('lodash');

// 提取标题关键词
const keywords = [];
rawData.forEach(item => {
  const words = item.title.toLowerCase().split(/\W+/).filter(word => word.length > 3);
  keywords.push(...words);
});

// 统计词频
const wordCounts = countBy(keywords);
const topWords = orderBy(toPairs(wordCounts), 1, 'desc').slice(0, 20);

爬取质量评估指南

基于上述可视化结果，我们可以从以下维度评估爬取质量：

深度评估矩阵

指标	良好标准	改进阈值	图表参考
平均深度	3-5层	<2层或>7层	热力图
内容长度	1k-5k字符	<500字符	直方图
响应时间	<200ms	>500ms	折线图
关键词分布	前10词覆盖70%	<50%覆盖率	词云图

常见问题诊断

深度不足：热力图中浅层页面占比超过60%，需检查match配置是否过宽
内容过短：直方图中<500字符的页面超过20%，需优化selector配置
响应异常：折线图中出现连续高响应时间，可能触发反爬机制

完整实现代码

以下是将爬取结果转换为可视化图表的完整Node.js脚本：

const fs = require('fs');
const { createCanvas } = require('canvas');
const { Chart } = require('chart.js/auto');
const { groupBy, countBy, toPairs, orderBy } = require('lodash');

// 读取爬取数据
const rawData = JSON.parse(fs.readFileSync('output.json', 'utf8'));

// 创建画布
const canvas = createCanvas(1200, 800);
const ctx = canvas.getContext('2d');

// 1. 内容长度直方图
const contentLengths = rawData.map(item => item.html.length);
const lengthBins = [0, 1000, 3000, 5000, 10000, Infinity];
const lengthLabels = ['0-1k', '1k-3k', '3k-5k', '5k-10k', '10k+'];
const lengthData = lengthBins.slice(0, -1).map((bin, i) => 
  contentLengths.filter(len => len >= bin && len < lengthBins[i+1]).length
);

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: lengthLabels,
    datasets: [{
      label: '页面内容长度分布',
      data: lengthData,
      backgroundColor: [
        'rgba(255, 99, 132, 0.7)',
        'rgba(54, 162, 235, 0.7)',
        'rgba(255, 206, 86, 0.7)',
        'rgba(75, 192, 192, 0.7)',
        'rgba(153, 102, 255, 0.7)'
      ]
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: { display: true, text: '页面内容长度分布' },
      legend: { position: 'top' }
    },
    scales: { y: { beginAtZero: true, title: { display: true, text: '页面数量' } } }
  }
});

// 保存图表
fs.writeFileSync('content-length-chart.png', canvas.toBuffer());