Question

我正在开发Spring Boot / Thymeleaf应用程序，并希望插入高库存图表（针对Compare Multiple Series）。前几天我可以使用它，但是现在尝试加载时，出现错误＃16，当然，状态为

页面中已定义的高图

第二次在同一页面中加载Highcharts或Highstock时，会发生此错误，因此已经定义了Highcharts命名空间。请记住，Highcharts.Chart构造函数和Highcharts的所有功能都包含在Highstock中，因此，如果您同时运行Chart和StockChart，则只需加载highstock.js文件。

但是，问题在于，我基本上只从图表的jsfiddle代码here中直接复制了代码，而仅做了一些基本更改。

该代码的javascript部分已添加到其自己的名为TrendGraph.js的.js文件中。
脚本导入已与TrendChart.js文件的导入一起添加到了_header.html片段中。
已将div标签添加到我要显示图表的实际buy.html页面中（但我已将该div标签中ID从“ container”更改为“ trendGraphContainer”，以及TrendGraph.js文件）。

我无法终生弄清楚问题的出处，因为我仅加载一张图表，并且没有重复的代码。关于stackoverflow的其他答案不能解决我的问题，并且我已阅读有关Highcharts和错误＃16的至少10个或更多问题。

以下是我的代码：

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 -->

感谢您的宝贵时间，我非常感谢您能提供的任何帮助。

Spring Boot / Thymeleaf应用程序出现Highstock错误＃16

0 个答案: