Rails 7 Highcharts报错ganttChart is not a function排查

问题表现 #

• 未加载甘特图的其他页面中Highcharts可正常运行
• 初步排查发现import map仅加载了Highcharts基础模块，无法识别Highcharts.ganttChart方法
• 尝试直接在HTML中通过script标签添加资源地址后，仍抛出以下错误：

Uncaught (in promise) TypeError: Highcharts.ganttChart is not a function

现有业务代码（Stimulus控制器） #

import {Controller} from "@hotwired/stimulus"

export default class extends Controller {

    connect() {
        
        let today = new Date(),
            day = 1000 * 60 * 60 * 24;

        today.setUTCHours(0);
        today.setUTCMinutes(0);
        today.setUTCSeconds(0);
        today.setUTCMilliseconds(0);
        today = today.getTime();

        let dateFormat = Highcharts.dateFormat;
        let series
        let chart; // global
       
        async function requestData() {
            const response = await fetch('http://localhost:3000/api/v1/charts/index');
            if (response.ok) {
                const data = await response.json();
                series = data.map(function (job, i) {
                    let data = job.deals.map(function (phase) {
                        return {
                            id: 'deal-' + i,
                            project: phase.project,
                            client: phase.client,
                            phase: phase.phase,
                            start: new Date(phase.from).getTime(),
                            end: new Date(phase.to).getTime(),
                            y: i
                        };
                    });
                    return {
                        name: job.name,
                        data: data,
                        current: job.deals[job.current]
                    };
                });
                setTimeout(requestData, 1000);
                console.log(series);

                chart = Highcharts.ganttChart('container', {

                    series: series,
                    title: {
                        text: 'Crew Schedule'
                    },
                    tooltip: {
                        pointFormat: '<span>Client {point.client}</span><br/>' +
                            '<span>Project: {point.project}</span><br/>' +
                            '<span>Phase: {point.phase}</span><br/>' +
                            '<span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span>'
                    },
                    lang: {
                        accessibility: {
                            axis: {
                                xAxisDescriptionPlural: 'The chart has a two-part X axis showing time in both week numbers and days.',
                                yAxisDescriptionSingular: 'The chart has a tabular Y axis showing a data table row for each point.'
                            }
                        }
                    },

                    scrollbar: {
                        enabled: true
                    },

                    rangeSelector: {
                        enabled: true,
                        selected: 0
                    },
                    accessibility: {
                        keyboardNavigation: {
                            seriesNavigation: {
                                mode: 'serialize'
                            }
                        },
                        point: {
                            valueDescriptionFormat: 'Assigned to {point.project} from   {point.x:%A, %B %e} to {point.x2:%A, %B %e}.'
                        },
                        series: {
                            descriptionFormatter: function (series) {
                                return series.name + ', job ' + (series.index + 1) + ' of ' + series.chart.series.length + '.';
                            }
                        }
                    },
                    xAxis: {
                        currentDateIndicator: true
                    },


                    navigator: {
                        enabled: true,
                        liveRedraw: true,
                        series: {
                            type: 'gantt',
                            pointPlacement: 0.5,
                            pointPadding: 0.25,
                            accessibility: {
                                enabled: false
                            }
                        },
                        yAxis: {
                            min: 0,
                            max: 3,
                            reversed: true,
                            categories: []
                        }
                    },


                    yAxis: {
                        type: 'category',
                        grid: {
                            columns: [{
                                title: {
                                    text: 'Crew'
                                },
                                categories: series.map(function (s) {
                                    return s.name;
                                })
                            }]
                        }
                    }
                })
            }
            return chart;
        }

        window.addEventListener('load', (event) => {
            requestData();
        });
    }
}

问题原因 #

Highcharts.ganttChart是甘特图扩展模块提供的方法，不在Highcharts基础核心包内。之前不管是import map配置还是script标签引入，都只加载了基础核心包，没有正确加载并注册甘特图模块，所以会报方法不存在的错误。
另外当前代码中使用的scrollbar、rangeSelector、navigator是Stock模块提供的功能，就算甘特图模块加载成功，后续运行也会因为缺少对应模块报错。

修复方案 #

根据实际使用的引入方式二选一即可：

• 模块化引入（import map/ES Module方式）
  1. 先在import map配置中补充highcharts/modules/gantt和highcharts/modules/stock的路径映射
  2. 在Stimulus控制器顶部添加模块引入和注册逻辑，必须在调用ganttChart之前执行：

  import Highcharts from 'highcharts'
  import HighchartsStock from 'highcharts/modules/stock'
  import HighchartsGantt from 'highcharts/modules/gantt'
  
  // 按顺序注册模块，先注册stock再注册gantt
  HighchartsStock(Highcharts)
  HighchartsGantt(Highcharts)
  

• 全局script标签引入方式
  调整script标签的引入顺序，必须严格按照「核心包→stock模块→gantt模块」的顺序加载，顺序错乱会导致注册失败：

  <!-- 1. 先加载Highcharts核心包 -->
  <script src="/your/path/highcharts.js"></script>
  <!-- 2. 再加载stock模块，提供滚动条、导航、范围选择器能力 -->
  <script src="/your/path/modules/stock.js"></script>
  <!-- 3. 最后加载gantt模块，注册ganttChart方法 -->
  <script src="/your/path/modules/gantt.js"></script>
  

内容的提问来源于stack exchange，提问作者teRIs-tech