在 django 模板中嵌入 javascript 代码答案

【问题标题】：Embed javascript code in a django template在 django 模板中嵌入 javascript 代码
【发布时间】：2014-01-15 02:05:02
【问题描述】：

基于这个 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
def index(request):
    template = loader.get_template('tfgplot/index.html')
    context = RequestContext(request)
    return render(request, 'tfgplot/index.html', context)

我的应用程序名为 tfgplot，模板 index.html 如下所示：

<div id="container" style="min-width: 300px; height: 300px; margin: 1em">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<head></head>
<body>
<div>
<script type="text/javascript">
{% autoescape off %}
    $('#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>
</div>
</body>

这应该会创建一个类似于 link 中可以看到的图形，但我无法看到我期望的图形，有什么想法吗？

【问题讨论】：

你的问题是什么？
如果这就是您在模板中的全部内容，那么还有几件事......我认为您的容器 div 应该在正文中。你也应该导入 jquery。

标签： javascript django highcharts

【解决方案1】：

首先，你的 html 很乱，这里有几点：

每个div 或几乎任何其他html 标记都应位于body 标记内。
您应该在head 标记内或body 标记末尾加载脚本。
您应该等到 DOM 准备好创建图表或执行任何其他 javascript 工作。
您需要jQuery 才能使$('#container') 工作。
div 元素作为 container 必须关闭。
您不应该将css 样式直接添加到html 元素。而是在一个单独的文件中进行（类似于styles.css）。
您的script 无需在div 中，您可以摆脱它。

这是一个应该做你想做的代码：

<!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/css 标准的更多信息，请查看来自 google 的this link。

此外，由于您使用的是 django，因此您需要注意模板继承。如果上述代码不起作用，请分享更多代码和/或错误信息。

【讨论】：