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.
  @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',
                    ),
                  ),
                ],
                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 应用程序的本机部分。