Ошибка Highstock # 16 с приложением Spring Boot / Thymeleaf

Question

Я работаю над приложением Spring Boot / Thymeleaf и хочу вставить диаграмму High-Stock (для Сравнить несколько серий ).У меня это работало на днях, но при попытке загрузить сейчас, я получаю ошибку № 16, которая, конечно, утверждает,

Highcharts уже определены на странице

Эта ошибка возникает во второй раз, когда Highcharts или Highstock загружаются на той же странице, поэтому пространство имен Highcharts уже определено.Помните, что конструктор Highcharts.Chart и все функции Highcharts включены в Highstock, поэтому, если вы используете Chart и StockChart в комбинации, вам нужно только загрузить файл highstock.js.

Проблема, однако, в том, что я в основном скопировал код непосредственно из кода jsfiddle диаграммы здесь с небольшими изменениями.

• Была добавлена ​​часть кода javascriptв свой собственный файл .js с именем trendGraph.js.
• Добавлен импорт сценариев в мой фрагмент _header.html вместе с импортом файла trendChart.js.
• Тег divбыл добавлен на фактическую страницу buy.html, где я хочу, чтобы график отображался (но я изменил идентификатор с «container» на «trendGraphContainer» в этом теге div, а также на соответствующее место в файле trendGraph.js).

Я не могу на всю жизнь выяснить, в чем заключается проблема, так как я загружаю только один график, и у меня нет дубликатов.код, который я могу найти.Другие ответы на stackoverflow не решили мою проблему, и я прочитал по крайней мере 10 или более вопросов, касающихся Highcharts и ошибки # 16.

Вот мой код ниже:

trendGraph.js

/**
* 
*/

var seriesOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'];

/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {

Highcharts.stockChart('trendGraphContainer', {

rangeSelector: {
  selected: 4
},

yAxis: {
  labels: {
    formatter: function () {
      return (this.value > 0 ? ' + ' : '') + this.value + '%';
    }
  },
  plotLines: [{
    value: 0,
    width: 2,
    color: 'silver'
  }]
},

plotOptions: {
  series: {
    compare: 'percent',
    showInNavigator: true
  }
},

tooltip: {
  pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b> 
  {point.y}</b> ({point.change}%)<br/>',
  valueDecimals: 2,
  split: true
},

series: seriesOptions
});
}

$.each(names, function (i, name) {

  $.getJSON('https://www.highcharts.com/samples/data/' + name.toLowerCase() + '-c.json',  function (data) {

    seriesOptions[i] = {
      name: name,
      data: data
    };

    // As we're loading the data asynchronously, we don't know what order it will arrive. So
   // we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;

   if (seriesCounter === names.length) {
     createChart();
   }
  });
});

_header.html

<!-- HighCharts js for pricing trend graph -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="js/trendGraph.js"></script>

buy.html

<div class="col-xl-12 col-lg-6 mb-4 mb-xl-0">
    <div class="card shadow">
        <div id="card-header" class="card-header">
            <h6 class="h6 text-uppercase mb-0 d-inline">Pricing Trends</h6>
                <div id="trendGraphContainer" style="width:100%; height:400px;"></div>
        </div> <!-- /.card-body -->
    </div> <!-- /.card -->
</div> <!-- /.row mb-4 -->

Спасибоза ваше время, и я очень ценю любую помощь, которую вы можете оказать.