在 javascript 嵌入式代码中使用 django 变量（来自 sqlite3 数据库的元素数组）答案

【问题标题】：Use django variable (array of elements from sqlite3 database) inside javascript embedded code在 javascript 嵌入式代码中使用 django 变量（来自 sqlite3 数据库的元素数组）
【发布时间】：2014-02-11 20:45:47
【问题描述】：

基于这个 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>

我还可以在 html 中编写我想在 JS 中使用的值的列表。因此，我可以在遍历所有记录的循环中使用{{ classK.attr1 }} 在带有<ul><li> 标签的.html 中显示数据。

现在，我需要绘制存储在 sqlite3 数据库中的值。每个类别都有一个数据值（即图形中每个X值都有一个Y轴值）。这两个值在表格的每一行上。我尝试了很多方法，例如：

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

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

【问题讨论】：

您的 {{ classK.attr1 }} 和 {{ classK.attr2 }} 看起来如何？ D 你将它作为 javascript 数组或字符串返回吗？
我的 models.py 看起来像：# -- encoding: utf-8 -- from django.db import models class classK(models.Model): attr1 = models. CharField(max_length=6) attr2 = models.SmallIntegerField()
Sebastian（和我）想知道的是在 HTML 页面中生成的输出 - 你能粘贴这个吗？不是您的模型或其他 python 代码。

标签： javascript python django sqlite highcharts

【解决方案1】：

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

【讨论】：

我可以访问模型类 K 中的所有字段（我有 9 个字段，我可以在 index.html 中读取它们）。我可以使用 clave (= models.AutoField(primary_key=True)) 以及其他字段。