当前位置：首页 > news >正文

如何将 Highcharts 集成到 Flutter 应用中

news 2026/5/12 6:19:00

将 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!,),],)),),);}}