Cách chính xác để tải thư viện JavaScript là gì?

Tôi đang cố hiển thị dữ liệu biểu mẫu dưới dạng biểu đồ đường. Tôi đang chạy Drupal 9 ở Lando. Tôi đang sử dụng Charts 5.0.x với mô hình con Highcharts. Tôi đã cài đặt thư viện Highcharts JS bằng trình soạn thảo. Đây là mã có liên quan.

.libraries.yml

bảng xếp hạng cao:
  js:
    /libraries/highcharts/highcharts.js: { }
  phụ thuộc:
    - lõi/jquery

.module

chức năng thống kê_độ_theme() {
  trở lại [
    'mychart_template' => [
      'biến' => ['chart_var' => NULL],
    ],
  ];
}

.routing.yml

stats_độs.render_form:
  đường dẫn: '/statistic/stats-độ'
  mặc định:
    _title: 'Bằng cấp Khoa học Vật lý và Kỹ thuật do Thành viên của các Nhóm Thiếu đại diện kiếm được'
    _form: '\Drupal\stats_degrees\Form\StatsDegreesForm'
  yêu cầu:
      _permission: 'truy cập nội dung'

.html.twig

{# stats_độ/mẫu/mychart-template.html.twig #}
{{ attachment_library('stats_degrees/highcharts') }}

<div id='container' style='width:100%;height:100%;'>
  {{ chart_var | nguyên }}
</div>

trình xử lý đệ trình

hàm công khai submitForm(mảng &$form, FormStateInterface $form_state) { 
   $form_state->setRebuild();
  }

Trình tạo Mẫu

 nếu ($form_state->isRebuilding()) {
   // lấy dữ liệu từ form và xây dựng biểu đồ
    // lấy mẫu cành cây
      $form['#theme'] = 'mychart_template';
      $form['#attached'] = mảng(
        'thư viện' => mảng ('stats_degrees/highcharts')
      );
      $form['#chart_var'] = $rendered_chart;
  }

Mẫu được hiển thị mà không có biểu đồ. Khi tôi nhìn vào phần đánh dấu HTML, tôi thấy mã biểu đồ được hiển thị trong chart_var và mã này nằm trong bảng điều khiển.

Uncaught ReferenceError: Highcharts không được xác định tại js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4396
js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:128 Uncaught TypeError: $(...).highcharts không phải là một chức năng tại HTMLDivElement.
[ẩn danh] (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4373
tại Function.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
tại S.fn.init.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
tại Object.attach (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4370)
tại js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:139
tại Array.forEach ()
tại Object.Drupal.attachBehaviors (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:136)
tại js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:365
tại HTMLDocument.listener (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:353)

Khi tôi đi sâu vào lỗi, tôi thấy nó bị lỗi ở đây.

(Highcharts)})(function(w){(function(b){function r(b,a){this.init(b,a)} var v=b.CenteredSeriesMixin,u=b.each,n=b .extend,q=b.merge,g=b.splat;n(r.prototype,{coll:"pane",init:function(b,a){this.chart=a;this.background=[]; a.pane.push(this);this.setOptions(b)},setOptions:function(b){this.options=q(this.defaultOptions,this.chart.angular?{background:{}}:void 0, b)},render:function(){var b=this.options,a=this.options.background,c=this.chart.renderer;

Tôi có đang tải thư viện Highcharts chính xác không?

Có vẻ như điều đang xảy ra là bạn cần thêm 'charts_highcharts/highcharts' làm phần phụ thuộc, như sau:

bảng xếp hạng cao:
  js:
    /libraries/highcharts/highcharts.js: { }
  phụ thuộc:
    - lõi/jquery
    - chart_highcharts/highcharts

(Nếu cách này không hiệu quả, hãy thử 'charts_highcharts/charts_highcharts' thay vì 'charts_highcharts/highcharts')