将 Highcharts 集成到 Flutter 应用中
将 Highcharts 集成到 Flutter 应用中，而不是通过内容分发网络加载，有许多充分的理由。 对所有支持的平台这样做既简单又直接。
添加 Highcharts 到 Flutter
如果你还没有操作过，可以通过运行以下命令将 Highcharts Flutter 添加到你的项目中：
flutter pub add highcharts_flutter添加 Highcharts 资源
首先，你需要下载并将 Highcharts 文件添加到你的 Flutter 项目中。 你可以在我们的 下载页面找到一个包含所有资源的 ZIP 压缩包，基于你的 Highcharts 许可证。
在你的 Flutter 项目中创建一个用于存放资源的文件夹。 如果你喜欢将所有内容整理得井井有条，也可以创建多个资源文件夹或子文件夹。 将你选择的文件从 ZIP 压缩包中复制到你想要的资源文件夹中。 在我们的示例中，我们创建了一个子文件夹：
mkdir -p assets/highcharts现在你需要告诉 Flutter 资源文件夹的位置。 打开你 Flutter 项目中的 pubspec.yaml 文件，并确保配置类似于以下内容：
flutter: assets: - assets/highcharts/ Use Highcharts assets使用 Highcharts 资源
按照前面的步骤，ZIP 压缩包中的 Highcharts 资源现在可以在你的 Flutter 项目的所有小部件中使用了。 最后一步是定义一个加载小部件，在加载 Highcharts 资源时显示，否则显示 Highcharts 小部件。
以下代码是一个简化的示例，用于突出基本概念。
import'package:flutter/material.dart';import'package:highcharts_flutter/highcharts.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@override State<MyApp>createState()=>_MyApp();}class_MyAppextendsState<MyApp>{late List<String>_assets;@overridevoidinitState(){super.initState();_assets=[];}@override Widgetbuild(BuildContext context){if(_assets.isEmpty){HighchartsHelpers.loadAssets(['assets/highcharts.js','assets/highcharts-more.js']).then((assets)=>setState((){_assets=assets;}));returnconstCircularProgressIndicator();}returnMaterialApp(title:'My App',home:Scaffold(appBar:AppBar(backgroundColor:Theme.of(context).colorScheme.inversePrimary,title:Text('My App'),),body:SafeArea(child:ListView(children:[HighchartsChart(HighchartsOptions(title:HighchartsTitleOptions(text:'My Chart',),series:[],),// Add Highcharts assets as javaScriptModules.javaScriptModules:snapshot.data!,),],)),),);}}文章更新发布与 2026 年 2 月 1 日
)
)
