Javascript 是否可以从文件中加载Highcharts选项？

在一个项目中，我想使用Highcharts，但与其将选项代码直接放在网站上，我更希望在一个额外的文件中看到它，例如charts.js。可能吗？ 到目前为止我所做的： 我创建了通用图表，它运行正常。我试图将Highcharts上显示的选项代码放在一个名为charts.js的文件中，并将其包含在标题中。但它不起作用，显示一个错误#13

我使用的代码是

function getPointCategoryName(point, dimension) {
    var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
    return axis.categories[point[isY ? 'y' : 'x']];
}

Highcharts.chart('container', {

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Sales per employee per weekday'
    },

    xAxis: {
        categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
    },

    yAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
        title: null,
        reversed: true
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var ix = point.index + 1,
                    xName = getPointCategoryName(point, 'x'),
                    yName = getPointCategoryName(point, 'y'),
                    val = point.value;
                return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
            }
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },

    tooltip: {
        formatter: function () {
            return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
                this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
        }
    },

    series: [{
        name: 'Sales per employee',
        borderWidth: 1,
        data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                yAxis: {
                    labels: {
                        formatter: function () {
                            return this.value.charAt(0);
                        }
                    }
                }
            }
        }]
    }

});

函数getPointCategoryName（点，维度）{ var系列=点系列， isY=维度===“y”， 轴=系列[isY？'yAxis'：'xAxis']； 返回轴类别[点[isY？'y'：'x']； } Highcharts.chart（'容器'{ 图表：{ 类型：'热图'， 玛金托普：40， marginBottom:80， 绘图边框宽度：1 }, 标题：{ 文本：“每个员工每个工作日的销售额” }, xAxis：{ 类别：[“亚历山大”、“玛丽”、“马克西米兰”、“索菲亚”、“卢卡斯”、“玛丽亚”、“利昂”、“安娜”、“蒂姆”、“劳拉”] }, 亚克斯：{ 类别：[‘星期一’、‘星期二’、‘星期三’、‘星期四’、‘星期五’]， 标题：空， 对 }, 可访问性：{ 要点：{ descriptionFormatter:函数（点）{ var ix=点指数+1， xName=getPointCategoryName（点，'x'）， yName=getPointCategoryName（点“y”）， val=点值； 返回ix+'.+xName+'销售'+yName+'，'+val+'； } } }, 颜色轴：{ 分:0,， minColor:“#FFFFFF”， maxColor:Highcharts.getOptions（）.Color[0] }, 图例：{ 对齐：“右”， 布局：“垂直”， 保证金：0， 垂直排列：“顶部”， y:25， 符号高度：280 }, 工具提示：{ 格式化程序：函数（）{ 返回''+getPointCategoryName（this.point，'x'）+'已售出
'+
'+getPointCategoryName（this.point，'y'）+''上的this.point.value+'项； } }, 系列：[{ 名称：“每位员工的销售额”， 边框宽度：1， 数据：[[0，0，0，0，0，0，0，10，10，（0，1，1，19，（0，1，1，1，1，1，0，10，10，10，（0，0，0，0，0，0，1，0，1，10，10，（0，1，1，1，19，（0，1，1，1，19，（0，1，3，3，0，0，0，0，0，0，0，0，0，4，7 7 7，67，（1，7，（1，0，0，0，0，0，9 7 7 7，（1，0，0，0，1，0，1，0，0，9 9 9 9 9 9 9 9 9 9 9，1，1，1，1，1，1，1，1，1，1，58，（1，1，1，1，58，（1，1，1，1，58，（1，1，0，58，（1，0，（1，0，0，0，0，0[5,2,12],，[5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]], 数据标签：{ 启用：对， 颜色：'#000000' } }], 响应：{ 规则：[{ 条件：{ 最大宽度：500 }, 图表选项：{ 亚克斯：{ 标签：{ 格式化程序：函数（）{ 返回此.value.charAt（0）； } } } } }] } }); 如果代码、CDN和Co在同一页上，有没有办法让代码失败，让它像在同一页上一样工作？或者我有什么做错了吗？

Highcharts error#13意味着Highcharts无法找到HTML元素来呈现图表。根据您的描述，似乎在DOM完全加载之前启动了脚本。作为解决方案将

chart.js

文件中的所有代码放入

DOMContentLoaded

事件回调函数：

window.addEventListener('DOMContentLoaded', (event) => {
    // chart.js
});

或者只需将脚本放在结束前

：

....
....

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="chart.js"></script>
  </body>
</html>