高阶专业使用说明｜如何将 Highcharts 集成到 Flutter 应用中

本文包含两部分：

Highcharts Flutter 集成入门

Highcharts Flutter 提供了一套强大的小部件，用于将图表无缝集成到您的 Flutter 应用中。这使您能够创建丰富且引人入胜的数据可视化，适用于移动端和网页端。

需求

Highcharts Flutter 依赖于特定的 SDK 功能，请确保你具备以下条件：

• Dart: 版本 3.3.0 或更高版本。 这确保了与最新语言特性和改进的兼容性。
• Flutter: 版本 1.17.0 或更高版本。 这是该包正常运行所需的最低 Flutter 版本。
• Web Package: If you’re targeting web, ensure the web package is correctly configured in your Flutter project. This is essential for web deployments.

安装

该命令会从 pub.dev 获取 highcharts_flutter 包，并将其添加到你的项目依赖中。

这使得 Highcharts Flutter 小部件可以在你的代码中使用。

示例

安装完成后，您就可以开始使用 HighchartsChart 小部件以及所有可用的图表选项。这个示例展示了一个简单的折线图，作为在 Flutter 项目中使用 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});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello, Highcharts!',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: ListView(
children: [
// Here is a Highcharts widget added to the ListView
HighchartsChart(
HighchartsOptions(
title: HighchartsTitleOptions(
text: 'Hello, Flutter!'
),
series: [
HighchartsLineSeries(
name: 'My First Series',
data: [[0, 5], [0.5, 55.5], [1, 10]],
options: HighchartsLineSeriesOptions(
color: '#C60'
)
)
]
)
)
],
),
)
);
}
}

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