Question

我正在使用django框架开发一个Web应用程序，需要在前端绘制和显示图表。所以我为此目的使用django chartit，但是当我运行django开发服务器时，它显示没有空白浏览器屏幕也没有错误。我迷失了我做错了。

这是渲染图的视图

from chartit import DataPool,Chart
from django.template import RequestContext
from django.template import Context,loader
from django.shortcuts import render_to_response
from django.http import HttpResponse
from graphtest.apps.graph_app.models import charttest
def chartview(request):
    powerdata = DataPool(series=[{'options':{
        'source':charttest.objects.all()},
        'terms':[
            'power',
            'time']}])
    cht = Chart(datasource=powerdata,series_options=[{'options':
                                                          {'type':'line',
                                                           'stacking':False},
                                                          'terms':
                                                              {'time':['power',]}}],
        chart_options={
        'title':{
            'text':'power data'},
        'xAxis':{'title':{'text':'xaxis'}}})

    return render_to_response('graph.html',{'powerchart': cht})

制作图表的模型

from django.db import models

class charttest(models.Model):
    power = models.PositiveIntegerField()
    time = models.DecimalField(decimal_places=10,max_digits=20)
    def __unicode__(self):
        return unicode(self.power)+' '+unicode(self.time)

和模板

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/static/js/highcharts.js"></script>
    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type ="text/javascript" src ="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    {% load chartit %}
    {{ powerchart|load_charts:"container"}}

</head>
<body>
<div id="container"></div>
</body>
</html>

请帮助我，我被困了好几个小时。如果需要更多信息，请询问。

Answer 1

尝试以下方法：

<div id="container">{{ powerchart|load_charts:"container"}}</div>

Answer 2

这解决了我的问题：

{% extends "base.html" %}

{% load chartit %}
{% block title %}Gráfico gratuito{% endblock %}

{% block content %}
    {% block javascript %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
    {% endblock %}
    <div class="container">
        <div class="row">
            <div id="gratis">{{ data|load_charts:"gratis" }}</div>
        </div>
    </div>
{% endblock %}

Answer 3

1。确保已将highcharts.js文件放在静态中且路径正确。

2。尝试这样的代码：

Answer 4

请确认Jquery.js是highcharts.js的前面

<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type ="text/javascript" src ="http://code.jquery.com/jquery-1.7.1.min.js">


<script type="text/javascript" src="/static/js/highcharts.js"></script>

django chartit没有图表显示，空浏览器屏幕

4 个答案: