Загрузка файла Javascript (Google Charts) в html с использованием django

Question

Я пытаюсь загрузить диаграмму Google из статического файла в html, используя Django.Я могу загрузить другие файлы JavaScript, используя {% load static %}.Кроме того, я могу отображать диаграмму, если я встраиваю файл javascript в html-файл:

{% extends '_base.html' %}

{% load static %}


{% block content %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <!-- JumboTron -->
  <div class="container">
      <div class="center-block">
        <div id="curve_chart"></div>
      </div>
  </div>

  <script type="text/javascript" id=demo>
    let data_from_django = {{ object_list|safe }};
    CHART WORKING    
    function drawChart() {
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options);

      }
  </script>

{% endblock %}

Однако, если я встраиваю код javascript в <script type="application/json" src="{% static 'js/load_data.js' %}"></script> и загрузив static,код никогда не выполняется.

Я пытался поместить файл javascript также в заголовок, но он все еще не загружается.Какие-нибудь идеи о чем-то, чего я мог бы упустить

Обновление

См. load_data.js:

$(function () {

let data_from_django = {{ object_list|safe }};
let dataValues=data_from_django["dataValues"];
let dataBacktest=data_from_django["dataBacktest"];

var googledata = [];
for(let i=0, size=dataValues.length; i<size; i++){
  var kline=dataValues[i]
  var value=kline["average"];  
  var date = new Date(kline["date"]);
  var googlekline = [date, value];
  googledata.push(googlekline);
}

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'value');
  data.addColumn({
    type: 'string',
    role: 'annotation'

  data.addRows(googledata);

  var options = {
    title: 'Price Chart',
    hAxis: {
      format: 'MMM, dd, yyyy, HH:mm'
    },
    explorer: {
      actions: ['dragToZoom', 'rightClickToReset'],
      axis: 'horizontal',
      maxZoomIn: 100.0
    },
    legend: {
      position: 'bottom'
    },
    width: $(window).width()*0.75,
    height: $(window).height()*0.5
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  chart.draw(data, options);

  }

});

Answer 1

Здесь возникают две проблемы:

1. Вы включаете файл как 'application / json', когда вы должны включить его как 'text / javascript'.<script type="text/javascript" src="{% static 'js/load_data.js' %}"></script>
2. Вы пытаетесь использовать переменную шаблона Django во включенном файле .js.Django не передает контекст шаблона в ваш файл .js, поэтому он рендерится как фактический код, а Javascript выдает ошибку (let data_from_django = {{ object_list|safe }}; не является допустимым Javascript).Вы должны определить переменную в вашем базовом файле, используя тег шаблона Django, а затем передать эту переменную во включенный скрипт.