专栏首页Python工程师可视化-bokeh-02-Django中部署

可视化-bokeh-02-Django中部署

系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3.2 bokeh:0.12.7

  • 本系列介绍可视化库bokeh,目标是在网站上使用
  • 今天讲讲如何在Django中使用

Part 1:使用场景介绍

  1. 在前端显示一个柱状图
  2. 柱状图的主体是在Django中完成的

前端效果

Part 2:前端代码

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Bokeh-测试2</title>

    <style>
        .table-center{
            text-align: center;
            vertical-align: middle;
            white-space: wrap;
        }

        .table-center-hide{
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>

    <!-- favicon.ico 请求 -->
    <link rel="shortcut icon" href="/static/pic/favicon.ico"> 

    <!-- 引入font_awesome -->
    <link rel="stylesheet" type="text/css" href="{% static 'font_awesome/css/font-awesome.css' %}">

    <!--引入jquery-->
    <script src="{% static 'js/jquery-3.3.1.min.js' %}" type="text/javascript"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>

    <!--引入bootstrap-->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.js'%}" type="text/javascript"></script>
    <script src="{% static 'bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript"></script>
    
    <!--引入bokeh-->
    <script src="{% static 'bokeh/js/bokeh-1.3.4.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'bokeh/js/bokeh-widgets-1.3.4.min.js'%}" type="text/javascript"></script>
    <script src="{% static 'bokeh/js/bokeh-tables-1.3.4.min.js'%}" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'bokeh/css/bokeh-1.2.0.min.css' %}">

    {{ script |safe }}

</head>

<body>

<div class="container-fluid rounded bg-dark" style="margin-top: 30px">
    <h2 class="font-weight-bold text-center text-white">bokeh示例</h2>
</div>

<div class="container-fluid">
    <div class="col-md-12">
        <div class="row container-fluid border" style="margin-top: 10px;margin-bottom: 10px">
            <div class="row container-fluid" style="margin-top: 10px;margin-bottom: 10px">
                <div class="col-md-6">
                    <!-- safe:关闭变量的自动转义 -->
                    {{ graph |safe }} 
                </div>

                <div class="col-md-6">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">数量</span>
                        </div>
                        <input type="text" oninput="value=value.replace(/[^\d]/g,'')"
                                               class="form-control" id="latest-m">
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>



<div style="height: 150px;"></div>

<div style="height: 150px;"></div>
<footer class="fixed-bottom">
    <div class="container-fluid bg-light border border-top border-secondary" style="height: 35px">
        <div style="height: 10px;"></div>
        <h6 class="text-center">底部位置 <a href="http://www.baidu.com" target="_blank">去百度</a></h6>
    </div>
</footer>


<!-- 引入自定义js -->
<script src="{% static 'js/self_bokeh_2.js' %}" type="text/javascript"></script>

</body>
</html>

代码结构

代码截图

Part 3:前端代码解读

  1. head内新增一段代码{{ script |safe }}
  2. body内新增一段代码{{ graph |safe }},注意放置的位置

Part 4:后端代码

View类

from django.shortcuts import render
from django.views.generic.base import View

from bokeh.plotting import figure, output_file, show
from bokeh.resources import CDN
from bokeh.embed import components

class Test2View(View):
    def get(self, request):
        tools_set = "hover,pan,wheel_zoom,box_zoom,reset,save,box_select"
        p = figure(plot_width=800, plot_height=400, tools=tools_set)

        p.vbar(x=[2, 4, 6, 8], width=1, bottom=1000,
               top=[6000, 7000, 8000, 6500],
               color="firebrick")

        script, div = components(p, CDN)

        return render(request, 'bokeh_example_2.html', {
            'script': script,
            'graph': div,
        })

url地址

from django.urls import re_path, path

from .views import Test1View, Test2View

app_name = "bokeh_examples"

urlpatterns = [
    re_path('^test1/$', Test1View.as_view(), name='test1'),
    re_path('^test2/$', Test2View.as_view(), name='test2'),
]

代码截图

Part 5:部分代码解读

  1. 注意导入figureCDNcomponents
  2. Django从后端传给前端两个参数scriptgraph
  3. 其中script对应一段js代码,graph对应一段html代码
  4. 关于如何控制图片在前端显示的位置大小,目前还有点问题,后续再剖析

以上为本次的学习内容,下回见

本文分享自微信公众号 - Python工程师(DatenSpiel),作者:壹章VBA

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-09-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 网站搭建-django-学习成绩管理-09-查询成绩之前端实现

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • Python-sqlite3-04-修改记录

    zishendianxia
  • Python-Excel-07-新建Excel工作簿

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • React之JSX语法

    如果要使用JSX,需要得到语法的支持,你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。 将上一篇文章的“你好,世界”拿过来看一下:

    用户1272076
  • VueJS 常用系统指令

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码

    cwl_java
  • bootstrap typeahead 异步从后台提取数据 常用 *

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • VUE基本介绍

    <script> new Vue({ data:{//定义变量初始值 //定义变量 userlist:[] }, ...

    Dean0731
  • bootstrap select 多选,最多选择两项 常用

    用户5760343
  • 基于Scrapy框架爬取厦门房价

    本文的运行环境是Win10,IDE是Pycharm,Python版本是3.6。 请先保证自己安装好Pycharm和Scrapy。

    潇洒坤
  • Asp.net+Vue2构建简单记账WebApp之五(vue.js构建记账页面)

    易兒善

扫码关注云+社区

领取腾讯云代金券