2

我正在使用 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>

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

4

4 回答 4

2

尝试以下操作：

<div id="container">{{ powerchart|load_charts:"container"}}</div>
于 2013-04-11T18:20:17.453 回答
1

这解决了我的问题：

{% 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 %}

于 2016-08-25T01:54:10.563 回答
0

1. 确保你已经把highcharts.js 文件放到你的静态文件中并且路径是正确的。

2. 尝试编写如下代码：

于 2014-10-27T09:06:44.243 回答
0

请确认 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>
于 2014-12-10T08:11:41.237 回答