วิธีที่ถูกต้องในการโหลดไลบรารี JavaScript คืออะไร

ฉันกำลังพยายามแสดงข้อมูลในแบบฟอร์มเป็นแผนภูมิเส้น ฉันใช้ Drupal 9 ใน Lando ฉันใช้แผนภูมิ 5.0.x กับโมดูลย่อย Highcharts ฉันติดตั้งไลบรารี Highcharts JS โดยใช้ผู้แต่ง นี่คือรหัสที่เกี่ยวข้อง

.libraries.yml

แผนภูมิสูง:
  จส:
    /libraries/highcharts/highcharts.js: { }
  การพึ่งพา:
    - แกน / jquery

.โมดูล

ฟังก์ชั่น stats_degrees_theme () {
  กลับ [
    'mychart_template' => [
      'ตัวแปร' => ['chart_var' => NULL],
    ]
  ];
}

.routing.yml

stats_degrees.render_form:
  เส้นทาง: '/statistics/stats-degrees'
  ค่าเริ่มต้น:
    _title: 'ปริญญาวิศวกรรมศาสตร์และวิทยาศาสตร์กายภาพที่ได้รับจากสมาชิกของกลุ่มที่ด้อยโอกาส'
    _form: '\Drupal\stats_degrees\Form\StatsDegreesForm'
  ความต้องการ:
      _permission: 'เข้าถึงเนื้อหา'

.html.twig

{# stats_degrees/templates/mychart-template.html.twig #}
{{ Attach_library('stats_degrees/highcharts') }}

<div id='คอนเทนเนอร์' สไตล์='ความกว้าง:100%;ความสูง:100%;'>
  {{ แผนภูมิ_var | ดิบ }}
</div>

ตัวจัดการการส่ง

ฟังก์ชันสาธารณะ submitForm (อาร์เรย์ &$form, FormStateInterface $form_state) { 
   $form_state->setRebuild();
  }

ตัวสร้างแบบฟอร์ม

 ถ้า ($form_state->isRebuilding()) {
   // รับข้อมูลแบบฟอร์มและสร้างแผนภูมิ
    // รับเทมเพลตกิ่งไม้
      $form['#theme'] = 'mychart_template';
      $form['#attached'] = อาร์เรย์(
        'library' => array('stats_degrees/highcharts')
      );
      $form['#chart_var'] = $rendered_chart;
  }

เทมเพลตแสดงผลโดยไม่มีแผนภูมิ เมื่อฉันดูที่มาร์กอัป HTML ฉันเห็นโค้ดแผนภูมิที่แสดงผลใน chart_var และนี่อยู่ในคอนโซล

Uncaught ReferenceError: Highcharts ไม่ได้กำหนดไว้ที่ js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4396
js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:128 Uncaught TypeError: $(...).highcharts ไม่ใช่ฟังก์ชันที่ HTMLDivElement
[ไม่ระบุชื่อ] (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4373
ที่ Function.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
ที่ S.fn.init.each (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:2)
ที่ Object.attach (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:4370)
ที่ js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:139
ที่ Array.forEach ()
ที่ Object.Drupal.attachBehaviors (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:136)
ที่ js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:365
ที่ HTMLDocument.listener (js_fLkad5FjTCYgrjWIVyhfUxVUTz4-TXopB2EJOzHz820.js:353)

เมื่อฉันเจาะลึกข้อผิดพลาด ฉันเห็นว่ามันล้มเหลวที่นี่

(Highcharts)})(ฟังก์ชัน(w){(ฟังก์ชัน(b){ฟังก์ชัน 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;

ฉันโหลดไลบรารี Highcharts ถูกต้องหรือไม่

ดูเหมือนว่าสิ่งที่เกิดขึ้นคือคุณต้องเพิ่ม 'charts_highcharts/highcharts' เป็นการอ้างอิง เช่น:

แผนภูมิสูง:
  จส:
    /libraries/highcharts/highcharts.js: { }
  การพึ่งพา:
    - แกน / jquery
    - charts_highcharts/highcharts

(หากไม่ได้ผล ให้ลองใช้ 'charts_highcharts/charts_highcharts' แทน 'charts_highcharts/highcharts')