将 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';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  State<MyApp> createState() => _MyApp();
}
class _MyApp extends State<MyApp> {
  late List<String> _assets;
  @override
  void initState() {
    super.initState();
    _assets = [];
  }
  @override
  Widget build(BuildContext context) {
    if (_assets.isEmpty) {
      HighchartsHelpers.loadAssets([
        'assets/highcharts.js',
        'assets/highcharts-more.js'
      ]).then((assets) => setState(() {
        _assets = assets;
      }));
      return const CircularProgressIndicator();
    }
    return MaterialApp(
      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 日