图表未显示在html模板django上

时间:2018-03-20 05:40:56

标签: python django

所以我使用bokeh.pydata在页面上绘制图形。然而它显示了四个点(' ....'),它应该绘制图形。 下面是我的python文件,它应该绘制图形。

from django.shortcuts import render , render_to_response
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login
from django.http import HttpResponseRedirect
from django import forms
from .forms import UserRegistrationForm
from django.urls import reverse
from bokeh.plotting import figure, output_file, show 
from bokeh.embed import components



def index(request):
    ### graph plotting stuff ###
    x= [1,3,5,7,9,11,13]
    y= [1,2,3,4,5,6,7]
    title = 'y = f(x)'

    plot = figure(title= title , 
        x_axis_label= 'X-Axis', 
        y_axis_label= 'Y-Axis', 
        plot_width =400,
        plot_height =400)

    plot.line(x, y, legend= 'f(x)', line_width = 2)
    #Store components 

    script, div = components(plot)
    print("@#$!@")
    print(script)
    print("@#$!@")
    print(div)
    # return render(request, 'visit/index.html', context=None)
    return render(request, 'visit/index.html', {'script' : script , 'div' : div})


def profile(request):
    return HttpResponseRedirect(reverse("main:home"))


def registration(request):
    if request.method == "POST":
        form = UserRegistrationForm(request.POST)
        if form.is_valid():
            formObj = form.cleaned_data
            username = formObj["username"]
            name = formObj["name"]
            email = formObj["email"]
            password = formObj["password"]
            if not (User.objects.filter(username=username).exists() or User.objects.filter(email=email).exists()):
                User.objects.create_user(username, email, password)
                user = authenticate(username=username, name=name, password=password)
                login(request, user)
                return HttpResponseRedirect('/')
    else:
        form = UserRegistrationForm()
    return render(request, 'visit/registration/register.html', {'form': form})

以下是我传递该图表的views.py:

def index(request):
    ### graph plotting stuff ###
    x= [1,3,5,7,9,11,13]
    y= [1,2,3,4,5,6,7]
    title = 'y = f(x)'

    plot = figure(title= title , 
        x_axis_label= 'X-Axis', 
        y_axis_label= 'Y-Axis', 
        plot_width =400,
        plot_height =400)

    plot.line(x, y, legend= 'f(x)', line_width = 2)
    #Store components 

    script, div = components(plot)
    print("@#$!@")
    print(script)
    print("@#$!@")
    print(div)
    # return render(request, 'visit/index.html', context=None)
    return render(request, 'visit/index.html', {'script' : script , 'div' : div})

我发现这种绘制图表的方法here 另外如果有另一种更简单的方法在django模板上显示图形,请建议。

我在单独的块中附加HTML代码(因为它很大)

<!-- graph bokeh things -->

  <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" />
  <link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.0.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.css" rel="stylesheet" type="text/css">
....
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.0.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.js"></script>
<!-- graph bokeh things -->


<!-- graph bokeh things -->
  <div >
      {{ div | safe }}
 </div>
  <!-- graph bokeh things -->

这是我的脚本部分:

<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.0.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.js"></script>
{{ script | safe }}

0 个答案:

没有答案