在javascript嵌入代码中使用django变量(来自sqlite3数据库的元素数组)

时间:2014-01-22 00:36:37

标签: javascript python django sqlite highcharts

基于此Highcharts示例(HTML中包含的javascript代码):http://jsfiddle.net/f4Ef7/

我有一个模板,我想嵌入JavaScript代码,而不必包含任何静态。浏览器正在处理与JS无关的任何内容。目前我的views.py看起来像:

# -*- encoding: utf-8 -*-

from django.shortcuts import render
from django.http import HttpResponse
from tfgplot.models import estado_foneras
from django.template import RequestContext, loader

from tfgplot.models import estado_foneras

def index(request):
    clave = estado_foneras.objects.order_by('clave')
    template = loader.get_template('tfgplot/index.html')
    context = RequestContext(request, {
        'clave': clave,
    })
    return render(request, 'tfgplot/index.html', context)

如果我使用以下代码,它会完美地绘制,我得到了我期望的结果:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
  </head>
  <body>
    <div id="container" style="min-width: 300px; height: 300px; margin: 1em">
    </div>
    <script type="text/javascript">
      {% autoescape off %}
      $(document).ready(function(){
          $('#container').highcharts({
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              series: [{
                  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
              }]
          });
      });
      {% endautoescape %}
    </script>
  </body>
</html>

我还能够在我想在JS中使用的值的html中编写一个列表。因此,我可以使用<ul><li>标记在.html中显示数据,并使用{{ classK.attr1 }}在循环中显示所有记录。

现在,问题是我需要绘制存储在sqlite3数据库中的值。每个类别都有数据值(即图中每个X值的一个Y轴值)。这两个值位于表格的每一行。我尝试过很多东西:

  $(document).ready(function(){
      $('#container').highcharts({
          xAxis: {
              categories: {{ classK.attr1 }}
          },
          series: [{
              data: {{ classK.attr2 }}
          }]
      });
  });

有什么建议,所以我可以将所有这些数据库值用作X轴和Y轴的一种数组吗?

1 个答案:

答案 0 :(得分:1)

您发送到模板的唯一变量称为“clave”,但您尝试使用名为“classK”的变量。也许您没有将变量发送到您认为自己的模板?