在我的浏览器上获取{%load chartit%}。图表未使用chartit加载

时间:2017-09-15 13:02:21

标签: html django highcharts

我正在使用Django Chartit显示图表,Cassandra 3.0是我的数据库。

我尝试渲染折线图,但它没有显示图表,而是显示{% load chartit %}。请提出建议。我用谷歌搜索,但没有用。

我认为HTML中的代码是正确的。但我不知道出了什么问题。

以下是补充:

Models.py

    # -*- coding: utf-8 -*-
from __future__ import unicode_literals

# -*- coding: utf-8 -*-

from django.db import models

# Create your models here.

from cassandra.cqlengine import columns
from django_cassandra_engine.models import DjangoCassandraModel


class PqpModel(DjangoCassandraModel):

    prd_id = columns.BigInt(primary_key=True)

    X_01 = columns.Decimal()

    X_02 = columns.Decimal()

    X_03 = columns.Decimal()

    X_04 = columns.Decimal()

    X_05_1 = columns.Decimal()

    X_05_10 = columns.Decimal()

    X_05_11 = columns.Decimal()

    X_05_12 = columns.Decimal()

urls.py

from django.conf.urls import url, include

from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

views.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render

from django.db import models

from cassandra.cqlengine import connection

from cassandra.cqlengine.management import sync_table

from cassandra.cluster import Cluster

from chartit import DataPool, Chart

from models import PqpModel

from django.http import HttpResponse


# Create your views here.

from django.http import HttpResponse

# def index(request):
#     cluster = Cluster(['127.0.0.1'])
#     session = cluster.connect()
#     session.set_keyspace('samplepqp')
    #return HttpResponse(session.execute("""SELECT * FROM qsp_recreate"""))
   # insert = PqpModel(prd_id="7859654564465465")
   # insert.save()
   #  cluster.shutdown()

def pqp_line_chart(request):
        cluster = Cluster(['127.0.0.1'])
        session = cluster.connect()
        session.set_keyspace('samplepqp')
        cluster.shutdown()
        #1: Create a DataPool or PivotDataPool object that specifies what data you need to retrieve and from where.
        ds = DataPool(
            series=[{'options': {
                'source': PqpModel.objects.all()},
                'terms': [
                    'prd_id',
                    'X_01',
                    'X_05_1']}
            ])

        # Step 2: Create the Chart object

        cht = Chart(

            datasource=ds,

            series_options=
            [{
                'options': {

                    'type': 'line',
                    'stacking': False},
                'terms': {
                    'prd_id': [
                        'X_01',
                        'X_05_1']

                }}],

            chart_options=
            {'title': {
                'text': 'QSPRAW DATA 7'},
                'xAxis': {
                    'title': {
                        'text': 'prd id data'}}})

        #return render({'qspraw7_data/index.html': cht})

        return render(request, {'pqpchart': cht})

的index.html

  <html>
 <head>
 <script type=”text/javascript” src=”/media/js/jquery-1.7.1.js”></script>
 <script type=”text/javascript” src=”/media/js/Highcharts-2.1.9/js/highcharts.js”></script>
 {% load chartit %}

 </head>
 <body>
 <div id=”container”>
     {{ pqpChart|load_charts:”container” }}
     </div>
 </body>
 </html>

1 个答案:

答案 0 :(得分:0)

您的HTML模板应如下所示:

<head>
<script type=”text/javascript” src=”/media/js/jquery-1.7.1.js”></script>
 <script type=”text/javascript” src=”/media/js/Highcharts-2.1.9/js/highcharts.js”></script>
 {% load chartit %}
 {{ pqpChart|load_charts:"container" }} 
</head>
<body>
 <div id=”container”>
 </div>
</body>

然后视图应该返回正确的变量,区分大小写的名称。在您的示例中,使用您在HTML模板中使用的相同大小写:

return render(request, {'pqpChart': cht})