学习笔记 semantic +django快速在线图表展示

本文链接：https://blog.youkuaiyun.com/weixin_44079503/article/details/124245691

当我们需要利用网站快速展示仿真数据时，可以用sematic UI和django快速开发。
相关网址如下：

步骤：
1… …> django-admin startproject mysite新建网站

…> py manage.py startapp polls 创建应用
polls/views.py中创建视图

from django.http import HttpResponse


def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

在 polls/urls.py 中，输入如下代码：

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

在根 URLconf 文件中指定我们创建的 polls.urls 模块

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

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

创建模型

from django.db import models


class Question(models.Model):
    question_text = models.CharField(max_length=200)
    pub_date = models.DateTimeField('date published')


class Choice(models.Model):
    question = models.ForeignKey(Question, on_delete=models.CASCADE)
    choice_text = models.CharField(max_length=200)
    votes = models.IntegerField(default=0)

激活模型

在配置类 INSTALLED_APPS 中添加设置
py manage.py makemigrations polls
py manage.py migrate

创建账号
py manage.py createsuperuser
启动服务器
py manage.py runserver
使用模板系统

<h1>{{ question.question_text }}</h1>
<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }}</li>
{% endfor %}
</ul>

简单表单

<form action="{% url 'polls:vote' question.id %}" method="post">
{% csrf_token %}
<fieldset>
    <legend><h1>{{ question.question_text }}</h1></legend>
    {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
    {% for choice in question.choice_set.all %}
        <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
    {% endfor %}
</fieldset>
<input type="submit" value="Vote">
</form>

引入semantic

在网站根目录下新建static文件夹
在settings.py中STATIC_URL = ‘/static/’
STATICFILES_DIRS=[
os.path.join(BASE_DIR,‘static’)
]
static目录结构如下
head标签加入

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/semantic.js' %}"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts-more.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>


    <title>Title</title>
</head>

在index.html页面第一项加入{% load static %}
body标签后加入

</body>
<script src="{% static 'js/main.js' %}" type="text/javascript"></script>
</html>

semantic的使用
从官网中复制相应的div放入index.html中，如果有js，写入main.js中。找对象的方法参考jquery.js的方法。
图表的引入参考highcharts官网教程。
以直线图为例：

进入highcharts.com.cn官网，选文档教程，左侧图表类型，直线图
复制js代码
修改js代码中的数据