Highcharts代码无法通过外部文件工作

Question

我正在使用Flask建立一个网站，我一直试图修复此代码，但我无法做到。

$(document).ready(function () {
  $('#container').highcharts({
      title: {
          text: 'Data from the Visitor Center',
          x: -20 //center
      },
      xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
          title: {
            text: 'Total numbers'
          },
          plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
          }]
       },
      legend: {
          layout: 'vertical',
          align: 'right',
          verticalAlign: 'middle',
          borderWidth: 0
      },
      credits: {
          enabled: false
      },
      series: [{
              name: 'Persons',
              data: {{ monthly_data['persons'] }}
      }, {
              name: 'Two Wheelers',
              data: {{ monthly_data['two_wheelers'] }}
      }, {
              name: 'Cars',
              data: {{ monthly_data['cars'] }}

      }, {
              name: 'Vans',
              data: {{ monthly_data['vans'] }}
      }, {
              name: 'Buses',
              data:  {{ monthly_data['buses'] }}
      },  {
              name: 'Autos',
              data:  {{ monthly_data['autos'] }}
      }]
  });
});

当我在同一个模板中使用上面的代码时，它可以工作。

{% extends 'layout.html' %}
<title> This is the index page version 0 </title>
{% block body %}
    <div class="container">
        <div class="row">
                <div class="col-xs-6 col-md-4">
                    <div id=container style="width:600px;"></div>
                </div>
        </div>
    </div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="/static/visitor_center_line.js" ></script>
<script>
$(document).ready(function () {
      $('#container').highcharts({
          title: {
              text: 'Data from the Visitor Center',
              x: -20 //center
          },
          xAxis: {
              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          },
          yAxis: {
              title: {
                text: 'Total numbers'
              },
              plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
              }]
           },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle',
              borderWidth: 0
          },
          credits: {
              enabled: false
          },
          series: [{
                  name: 'Persons',
                  data: {{ monthly_data['persons'] }}
          }, {
                  name: 'Two Wheelers',
                  data: {{ monthly_data['two_wheelers'] }}
          }, {
                  name: 'Cars',
                  data: {{ monthly_data['cars'] }}

          }, {
                  name: 'Vans',
                  data: {{ monthly_data['vans'] }}
          }, {
                  name: 'Buses',
                  data:  {{ monthly_data['buses'] }}
          },  {
                  name: 'Autos',
                  data:  {{ monthly_data['autos'] }}
          }]
      });
});
</script>

{% endblock %}

如果我将此代码放在静态文件夹中的单独文件中，它就无法工作。 如何从外部文件运行此代码？提前致谢