Question

我正在使用Google图表在我的Web应用程序中显示数据。现在，这些图表就像这样在我的模板（HTML）的script标签中。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date',  'Low', {role: 'annotation'},  'Medium', {role: 'annotation'},  'High', {role: 'annotation'}, 'Emergency',],
      ['{{three_sun}}', 124,  124,    163,    163,     87,    87,   0],
      ['{{two_sun}}', 120,  120,    160,    160,     80,    80,   0],
      ['{{last_sun}}', 127,  127,    159,    159,     89,    89,   0],
      ['{{this_sun}}', {{total_low}},  {{total_low}},    {{total_medium}},    {{total_medium}},     {{total_high}},    {{total_high}},   {{total_emergency}}]

    ]);

    var options = {
      title: 'All Bugs',
      vAxis: {title: 'Total Bugs'},
      isStacked: true
    };

    var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

    chart.draw(data, options);
  }
</script>

我正在尝试清理此项目，并使我所有的脚本都来自静态.js文件。

现在，它显然无法识别{{three_sun}}。我需要知道如何从static.js这样的上下文变量中使用此图表。

chart.js

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date',  'Low', {role: 'annotation'},  'Medium', {role: 'annotation'},  'High', {role: 'annotation'}, 'Emergency',],
          ['{{three_sun}}', 124,  124,    163,    163,     87,    87,   0],
          ['{{two_sun}}', 120,  120,    160,    160,     80,    80,   0],
          ['{{last_sun}}', 127,  127,    159,    159,     89,    89,   0],
          ['{{this_sun}}', {{total_low}},  {{total_low}},    {{total_medium}},    {{total_medium}},     {{total_high}},    {{total_high}},   {{total_emergency}}]

        ]);

        var options = {
          title: 'All Bugs',
          vAxis: {title: 'Total Bugs'},
          isStacked: true
        };

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }

并在我的模板中像这样引用它：

<head>
   {% load static %}
   <script src="{% static 'path/to/charts.js' %></script>
</head>
<body>
   <div id="chart_div"></div>
</body>

如何在我的.js文件中使用这些{{ }}变量？

Answer 1

在这里找到答案：Django Template Variables and Javascript

因此，在模板中添加一个脚本标记并创建变量，然后将这些变量可以在js文件中使用。

<script type="text/javascript">
    var a = "{{three_sun}}"
</script>

如何将上下文从视图传递到JS文件Django

1 个答案: