Highcharts仪表盘页面缩放时出现Uncaught TypeError错误求助

问题描述 #

在CSHTML项目中引入Highcharts Dashboard Demo时，页面缩放反复抛出Uncaught TypeError: Cannot read properties of undefined (reading 'stacks')错误，图表缩放功能失效，但代码复制到jsfiddle中可正常运行，推测为库引入相关问题。

解决方案 #

1. 检查库的引入顺序与完整性 #

Highcharts Dashboard依赖完整的Highcharts核心库及配套模块，必须按以下顺序引入，缺失或顺序错误会导致内部方法调用失败：

• 先引入Highcharts核心文件
• 再引入数据处理、导出等必要模块
• 最后引入Highcharts Dashboard模块

示例正确引入顺序（替换为项目使用的稳定版本）：

<script src="highcharts.js"></script>
<script src="modules/data.js"></script>
<script src="modules/exporting.js"></script>
<script src="dashboards/dashboards.js"></script>

2. 确认版本兼容性 #

Highcharts Dashboard与Highcharts核心库版本必须严格匹配，不兼容的版本组合会引发未定义属性错误。建议使用官方同步更新的稳定版本，比如Highcharts v11.x对应Dashboard v1.x的最新版本。

3. 排查环境变量冲突 #

检查项目中是否存在其他JS库（如jQuery、第三方图表库）覆盖Highcharts或Dashboards全局变量。可在浏览器控制台执行console.log(Highcharts, Dashboards)，确认对象是否正常加载且属性完整。

4. 确保DOM加载完成后初始化 #

CSHTML中可能存在DOM未完全加载就执行初始化代码的情况，导致元素或库未就绪。可将初始化代码包裹在DOM加载完成事件中：

document.addEventListener('DOMContentLoaded', function() {
    const csvData = document.getElementById('csv').innerText;

    Highcharts.SVGRenderer.prototype.symbols.download = function (x, y, w, h) {
        const path = [
            'M', x + w * 0.5, y,
            'L', x + w * 0.5, y + h * 0.7,
            'M', x + w * 0.3, y + h * 0.5,
            'L', x + w * 0.5, y + h * 0.7,
            'L', x + w * 0.7, y + h * 0.5,
            'M', x, y + h * 0.9,
            'L', x, y + h,
            'L', x + w, y + h,
            'L', x + w, y + h * 0.9
        ];
        return path;
    };

    let board = Dashboards.board('container', {
        dataPool: {
            connectors: [{
                id: 'Vitamin',
                type: 'CSV',
                options: {
                    csv: csvData,
                    firstRowAsNames: true
                }
            }]
        },
        editMode: {
            enabled: true,
            contextMenu: {
                enabled: true,
                items: ['editMode']
            }
        },
        gui: {
            layouts: [
                {
                    id: 'layout-1',
                    rowClassName: 'custom-row',
                    cellClassName: 'custom-cell',
                    rows: [
                        {
                            cells: [
                                {
                                    id: 'dashboard-col-0',
                                    width: '50%'
                                },
                                {
                                    id: 'dashboard-col-1'
                                },
                                {
                                    id: 'dashboard-col-12'
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        components: [{
            sync: {
                visibility: true,
                highlight: true,
                extremes: true
            },
            connector: {
                id: 'Vitamin'
            },
            cell: 'dashboard-col-0',
            type: 'Highcharts',
            columnAssignment: {
                Food: 'x',
                'Vitamin A': 'value'
            },
            chartOptions: {
                chart: {
                    type: 'pie'
                },
                exporting: {
                    buttons: {
                        customButton: {
                            symbol: 'download',
                            onclick: function () {
                                this.downloadXLS();
                            },
                        }
                    }
                },
                credits: {
                    enabled: false
                },
            }
        },
        {
            cell: 'dashboard-col-1',
            sync: {
                visibility: true,
                highlight: true,
                extremes: true
            },
            connector: {
                id: 'Vitamin'
            },
            type: 'Highcharts',
            columnAssignment: {
                Food: 'x',
                'Vitamin A': 'y'
            },
            chartOptions: {
                xAxis: {
                    type: 'category'
                },
                chart: {
                    animation: false,
                    type: 'column'
                },
                exporting: {
                    buttons: {
                        customButton: {
                            symbol: 'download',
                            onclick: function () {
                                this.downloadXLS();
                            },
                        }
                    }
                },
                credits: {
                    enabled: false
                },
            }
        },
        {
            cell: 'dashboard-col-12',
            connector: {
                id: 'Vitamin'
            },
            type: 'DataGrid',
            editable: true,
            sync: {
                highlight: true
            }
        }]
    });
});

内容的提问来源于stack exchange，提问作者Michael