Highcharts for Flutter 正式发布

这是官方2025年年中发布的的，Highcharts for Flutter 已结束测试版，可供生产使用。

Flutter 已成为构建在 Android 和 iOS 上运行的移动应用程序的首选框架。现在，可以使用我们的官方软件包将 Highcharts 引入您的 Flutter 项目，而无需跳过障碍或依赖社区维护的包装器。

自推出测试版以来，我们根据社区的反馈加强了集成、修复了错误并提高了性能。

如果您是 Highcharts for Flutter 的新手：让我们一起启动并运行。

安装

到 highcharts_flutter您的项目，请使用以下 Flutter 命令：

<span style="background-color:#fffaf0"><span style="color:#2f2b38"><span style="color:#000000">flutter pub </span><span style="color:#000088">add</span><span style="color:#000000"> highcharts_flutter</span></span></span>

这将在包的 pubspec.yaml 中添加如下行（并运行隐式 flutter pub get）：

<span style="background-color:#fffaf0"><span style="color:#2f2b38"><span style="color:#000000">dependencies</span><span style="color:#666600">:</span><span style="color:#000000">highcharts_flutter</span><span style="color:#666600">:</span> <span style="color:#666600">^</span><span style="color:#006666">1.0</span><span style="color:#666600">.</span><span style="color:#006666">0</span></span></span>

然后将其导入您的 Dart 代码：

<span style="background-color:#fffaf0"><span style="color:#2f2b38"><code><span style="color:#000088"><span style="color:#000088">import</span></span> <span style="color:#008800"><span style="color:#008800">'package:highcharts_flutter/highcharts.dart'</span></span><span style="color:#666600"><span style="color:#666600">;</span></span></code></span></span>

所有 Highcharts 选项都可供您在项目中使用。查看 pub.dev 上的highcharts_flutter页面以获取完整的选项列表。

示例：

下面是一个简单的示例，展示了如何使用 Highcharts for Flutter 在您的应用程序中构建折线图：

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.@overrideWidget 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 ListViewHighchartsChart(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',),),],plotOptions: HighchartsPlotOptions(series: HighchartsSeriesOptions(point: HighchartsSeriesPointOptions(events: HighchartsSeriesPointEventsOptions(click: HighchartsCallback((args) => {final point = args[0];debugPrint('Point value: ${point['x']}, ${point['y']}');}),),),),),),),],),),);}
}

所有图表选项都可以使用 HighchartsChart.refresh()动态更新。这使得构建交互式、响应式图表变得更加容易，这些图表的行为类似于 Flutter 应用程序的本机部分。