Nodejs实现的技术雷达图应用

Nodejs实现的技术雷达图应用

学习了一段时间的node.js，写这个应用 : https://github.com/tajpure/Tech-Radar 有兴趣的可以看一下。

5 回复

Node.js 实现的技术雷达图应用

大家好！经过一段时间的学习，我尝试用 Node.js 实现了一个技术雷达图应用。这个应用能够帮助团队管理和评估各种技术的成熟度。如果你对这个项目感兴趣，可以访问我的 GitHub 仓库查看源码：Tech-Radar。

项目结构

该项目主要由以下几个部分组成：

  1. server.js - 主服务器文件，负责启动 Node.js 服务器。
  2. radar.js - 技术雷达的数据处理模块。
  3. views - 存放前端页面模板文件。
  4. public - 存放静态资源文件（如 CSS、JavaScript 文件）。

示例代码

首先，我们来看一下 server.js 文件，它负责启动一个简单的 HTTP 服务器：

// server.js
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.static('public'));
app.set('view engine', 'ejs');

const radarData = require('./radar');

app.get('/', (req, res) => {
    res.render('index', { radar: radarData });
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

接下来是 radar.js 文件，它包含了技术雷达的数据处理逻辑：

// radar.js
module.exports = [
    {
        name: 'Node.js',
        quadrant: 'Languages & Frameworks',
        ring: 'Adopt',
        description: 'A JavaScript runtime built on Chrome\'s V8 JavaScript engine.'
    },
    {
        name: 'React',
        quadrant: 'Platforms',
        ring: 'Trial',
        description: 'A JavaScript library for building user interfaces.'
    }
    // 更多数据...
];

最后是 index.ejs 模板文件，它用于渲染页面：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tech Radar</title>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
    <h1>Technology Radar</h1>
    <div id="radar">
        <% radar.forEach(function(tech) { %>
            <div class="tech">
                <h2><%= tech.name %></h2>
                <p><%= tech.quadrant %> - <%= tech.ring %>: <%= tech.description %></p>
            </div>
        <% }); %>
    </div>
</body>
</html>

总结

以上就是我使用 Node.js 和 Express 框架实现的一个简单技术雷达图应用。通过这个项目，你可以更好地理解和掌握 Node.js 的基本使用方法。希望这个项目对你有所帮助！

如果你有任何问题或建议，欢迎在 GitHub 上提交 Issue 或 Pull Request。


ER_NO_SUCH_TABLE: Table ‘hoolai_share.follower’ doesn’t exist

抱歉，注释掉routes/index.js里对tech-dao的引用就可以了。

google trends表里的time_interval字段采用如下格式:2004-01, circle表里的cid字段 1 表示后端圈子 2 表示前端圈子。具体说明会在readme中更新。

技术雷达图（Tech Radar）是一种常用的技术管理工具，用于评估和展示组织当前使用的技术及其状态。在本示例中，我们将使用 Node.js 和一些常见的库来创建一个简单的技术雷达图应用。

目标

实现一个 Node.js 应用，该应用能够生成并展示技术雷达图。雷达图将根据给定的数据动态生成，并可以通过前端展示出来。

技术栈

  • Node.js: 后端服务框架。
  • Express: 简化 HTTP 服务器的搭建。
  • Chart.js: 用于生成雷达图。
  • EJS: 模板引擎，用于渲染 HTML 页面。

示例代码

1. 初始化项目

首先，你需要安装必要的依赖包：

mkdir tech-radar
cd tech-radar
npm init -y
npm install express ejs chart.js --save

2. 创建后端服务

在项目根目录下创建 server.js 文件，内容如下：

const express = require('express');
const app = express();
const port = 3000;

app.set('view engine', 'ejs'); // 设置模板引擎为 EJS

// 示例数据
const data = {
    labels: ['Angular', 'React', 'Vue', 'Ember'],
    datasets: [{
        label: 'Skill Level',
        data: [4, 5, 3, 2],
        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)'
        ],
        borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
    }]
};

app.get('/', (req, res) => {
    res.render('index', {data: data});
});

app.listen(port, () => {
    console.log(`App listening at http://localhost:${port}`);
});

3. 创建前端页面

在项目根目录下创建 views 文件夹，并在其中创建 index.ejs 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tech Radar</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div style="width: 50%;">
    <canvas id="myRadarChart"></canvas>
</div>
<script>
const ctx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: <%= JSON.stringify(data) %>,
    options: {
        scale: {
            ticks: {
                beginAtZero: true,
                max: 5,
                stepSize: 1
            }
        }
    }
});
</script>
</body>
</html>

解释

  • server.js 中，我们设置了一个路由 / 来渲染主页，并传递了技术雷达图所需的数据。
  • index.ejs 使用 EJS 渲染，并通过 <%= JSON.stringify(data) %> 将数据传递给前端。
  • 前端使用 Chart.js 的雷达图组件来绘制雷达图。

你可以运行 node server.js 并访问 http://localhost:3000 查看效果。

回到顶部