17370845950

系统：windows 7语言版本：anaconda3-4.3.0.1-windows-x86_64编辑器：pycharm-community-2016.3.2bokeh：0.12.7

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

Part 1：使用场景介绍

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

前端效果

Part 2：前端代码

代码语言：javascript代码运行次数：0运行复制

{% load staticfiles %}                                                                                         {{ script |safe }}    
bokeh示例
                                                                                {{ graph |safe }}                                                                                                         数量                                                                                                            

代码结构

代码截图

Part 3：前端代码解读

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

Part 4：后端代码

View类

代码语言：javascript代码运行次数：0运行复制

from django.shortcuts import renderfrom django.views.generic.base import Viewfrom bokeh.plotting import figure, output_file, showfrom bokeh.resources import CDNfrom bokeh.embed import componentsclass 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,        })

代码语言：javascript代码运行次数：0运行复制

url地址

代码语言：javascript代码运行次数：0运行复制

from django.urls import re_path, pathfrom .views import Test1View, Test2Viewapp_name = "bokeh_examples"urlpatterns = [    re_path('^test1/$', Test1View.as_view(), name='test1'),    re_path('^test2/$', Test2View.as_view(), name='test2'),]

代码语言：javascript代码运行次数：0运行复制

代码截图

Part 5：部分代码解读

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

---