You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET Core中Highcharts.chart is not a constructor报错求助

解决Highcharts.chart is not a constructor错误(.NET Core + Highcharts 10.3.3.1)

以下是排查和解决步骤:

1. 确认Highcharts脚本正确加载

确保在渲染图表的代码之前加载对应版本的Highcharts核心脚本,版本要与你使用的10.3.3.1匹配(主版本10.3.3即可):

<!-- 在<head>或<body>末尾添加 -->
<script src="https://code.highcharts.com/10.3.3/highcharts.js"></script>

加载完成后,打开浏览器控制台输入Highcharts,确认能看到完整的全局对象,且Highcharts.chart是一个函数。如果看不到,检查脚本路径是否正确、是否有网络拦截,或者是否存在多个版本Highcharts冲突的情况。

2. 替换HighchartsRenderer为原生Highcharts API

你当前使用的HighchartsRenderer可能是第三方封装库(如Highcharts.NET)的组件,若版本不兼容会导致生成的JS代码调用失效。建议直接用原生方式渲染:

  • 首先在页面添加图表容器:
    <div id="targetChart" style="width: 100%; height: 400px;"></div>
    
  • 然后用原生JS初始化图表,将chartOptions序列化为JSON传入:
    // 确保DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
        Highcharts.chart('targetChart', @Html.Raw(System.Text.Json.JsonSerializer.Serialize(chartOptions)));
    });
    

3. 排查模块化加载导致的全局对象缺失

如果你的项目使用ES6模块化方式引入Highcharts(如import Highcharts from 'highcharts'),需要手动将Highcharts暴露到全局window对象,否则页面无法访问到全局的Highcharts:

import Highcharts from 'highcharts';
// 暴露到全局
window.Highcharts = Highcharts;

4. 检查第三方封装库版本兼容性

若坚持使用HighchartsRenderer,确认你使用的.NET封装库(如Highcharts.NET)版本与Highcharts 10.3.3.1完全兼容。部分旧版本封装库可能不支持较新的Highcharts版本,导致生成的代码调用了已废弃或不存在的构造函数。

内容的提问来源于stack exchange,提问作者amit shukla

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.23 04:08:09