通过雷达图获取用户输入并上传数据到后台

原创

已于 2024-07-10 17:43:46 修改 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #Echarts #Ajax #Django #雷达图

于 2019-04-13 11:05:29 首次发布

该博客介绍了如何使用Echarts在前端创建雷达图，用户可以通过点击图表修改权重，实时更新前端显示并利用Ajax将数据传送到Django后台。详细讲解了前端Canvas绘制、响应式处理、数据上传到Django的实现过程，并提供了相关教程链接和完整代码下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能说明

html前端页面展示模仿Echarts的雷达图（六维蛛网图），用户在雷达图上点击图上节点改变在六个维度上的权重数据，同时将改变后的结果显示在网页前端，并将数据传回服务器。

前端效果图

技术方案

前端使用html+css+js，绘制雷达图使用canvas，数据处理与前端展示通过js处理，向服务器发送数据使用ajax，服务器后台使用python3.7+Django框架。

代码实现思路

绘制Canvas思路：

1. 绘制5个六边形。先确定这个六边形的边长，通过边长计算出每个顶点的坐标，从而根据坐标来画出图形。每画完一个六边形使用canvas的fill方法填充颜色。通过canvas对透明效果的叠加实现背景颜色的逐层渐变。

2. 绘制从中心点向六个角的发散线段。将六边形对角的三对顶点连接起来形成蛛网。

3. 在每个顶点绘制圆点。以每个顶点为圆心，画一个固定半径的小圆。

4. 添加覆盖物。思路同1，连接六个点后填充颜色即可，初始状态为每个维度上都放在权值为3的点上。

5. 给canvas添加鼠标点击响应事件，通过鼠标的点击，获取鼠标当前点击的坐标，然后遍历5个六边形的所有顶点，通过计算现在点击的坐标与每个顶点之间的距离，判断是否小于等于这个小圆的半径就可以得出用户是否点击了这个小圆，如果用户点击了这个小圆，那么就对整个canvas进行刷新，也可以叫做重绘，把变化后新的覆盖物的形状画上去。

前端展示权重思路：

通过在上述5（鼠标点击响应）中的重绘函数中添加赋值语句，通过id选择器的方式对页面底部被禁用的输入框进行赋值，完成展示。

数据上传思路：

在上述5（鼠标点击响应）中的重绘函数中添加ajax语句，发起向后端的POST请求。在Django中建立响应url及处理函数，完成数据的接收并将数据打印在Terminal窗口中。

具体代码

说明：canvas的高度、宽度、六边形边长和小圆的半径在html文件的开头，便于配置。同时，前端js需要判断浏览器的类型，因为IE和firefox的offset和layer属性需要减去当前标签到浏览器左上角的距离，而谷歌和safari是不需要管这个标签的外部距离。

在Pycharm中新建Django项目。

urls.py文件：

# -*- coding: utf-8 -*-

from django.contrib import admin
from django.urls import path

from django.conf.urls import url
from . import view

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^$', view.show),  # 页面展示
    url(r'^uploadData$', view.uploadData),  # 上传数据接口
]

在urls.py文件同路径下创建view.py文件：

# -*- coding: utf-8 -*-

from django.http import HttpResponse
from django.shortcuts import render_to_response
from django.shortcuts import render
import json
import os
import time
import re


def show(request):
    return render(request, 'show.html')


def uploadData(request):
    data = request.POST.get('data')
    print(data)
    return HttpResponse('Server Received!')

在项目中的templates文件夹下创建show.html文件：