Flutter图表绘制插件flutter_fusioncharts的使用

Flutter图表绘制插件flutter_fusioncharts的使用

FusionCharts 是一个提供100多种图表和2000多种地图的JavaScript图表库，适用于您的Web和移动应用程序。所有可视化都是交互式和动画化的，并通过webview渲染。此插件提供了与FC核心JavaScript库集成的Flutter界面。

该包还包含FusionTime（时间序列图表）、FusionWidgets（仪表盘、实时图表）、PowerCharts（统计和高级图表）和FusionMaps（热力图）。

• 官方网站: https://www.fusioncharts.com/
• 文档: https://www.fusioncharts.com/dev/
• 许可协议: https://www.ideracorp.com/legal/FusionCharts#tabs-2
• 支持: https://www.fusioncharts.com/contact-support

开始使用

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_fusioncharts: ^1.0.2

现在，在你的Dart代码中导入插件文件：

import 'package:flutter_fusioncharts/flutter_fusioncharts.dart';

下载FusionCharts核心库

运行以下命令以下载FusionCharts核心库：

wget -O fc_script.dill https://cdn.fusioncharts.com/downloads/fc-versions-flutter/fc_script.dill; dart run fc_script.dill; rm fc_script.dill

注意上述命令将执行以下操作：

1. 从CDN获取zip文件。
2. 将文件解压到名为 fusioncharts 的文件夹中。
3. 更新 pubspec.yaml 中的资源条目。

要安装特定版本，请传递 -v 参数：

wget -O fc_script.dill https://cdn.fusioncharts.com/downloads/fc-versions-flutter/fc_script.dill; dart run fc_script.dill -v <VERSION_NUMBER>; rm fc_script.dill

当前支持的FusionCharts版本：

• 版本3.20
• 版本3.19
• 版本3.18
• 版本3.17

如果想要手动步骤，请参阅以下部分。

手动步骤下载FusionCharts JavaScript包

从以下链接下载FusionCharts核心库（基于你计划使用的FusionCharts版本）：

• 版本3.20
• 版本3.19
• 版本3.18
• 版本3.17

将下载并解压的文件夹 fusioncharts 放在你的应用根目录下。

在 pubspec.yaml 文件中添加资源依赖：

  assets:
    - .env       # .env文件用于存储许可证密钥
    - fusioncharts/integrate/index_local.html
    - fusioncharts/integrate/index_cdn.html
    - fusioncharts/integrate/index.js
    - fusioncharts/core/fusioncharts.charts.js
    - fusioncharts/core/fusioncharts.overlappedbar2d.js
    - fusioncharts/core/fusioncharts.timeseries.js
    - fusioncharts/core/fusioncharts.treemap.js
    - fusioncharts/core/fusioncharts.powercharts.js
    - fusioncharts/core/fusioncharts.maps.js
    - fusioncharts/core/fusioncharts.zoomscatter.js
    - fusioncharts/core/fusioncharts.js
    - fusioncharts/core/fusioncharts.excelexport.js
    - fusioncharts/core/fusioncharts.widgets.js
    - fusioncharts/core/fusioncharts.zoomline.js
    - fusioncharts/core/fusioncharts.gantt.js
    - fusioncharts/core/fusioncharts.overlappedcolumn2d.js
    - fusioncharts/core/fusioncharts.vml.js
    - fusioncharts/core/fusioncharts.accessibility.js  # 不适用于V3.17

Android配置

为了支持图表渲染和导出功能，需要进行以下更改：

在 android/app/build.gradle 中：

...
compileSdkVersion 33
...
minSdkVersion 17
...

在 android/src/main/AndroidManifest.xml 中：

...
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION"/>
    <uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>

android:usesCleartextTraffic="true" // 在application/activity标签下
android:requestLegacyExternalStorage="true"
...

iOS配置

在 Info.plist 中添加以下条目：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  <key>NSAllowsArbitraryLoadsInWebContent</key>
  <true/>
  <key>NSAllowsLocalNetworking</key>
  <true/>
</dict>
<key>NSPhotoLibraryUsageDescription</key>
<string>Fusion Charts requires media storage permission to enable charts export feature.</string>

在 Podfile 中添加以下配置：

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
      'PERMISSION_PHOTOS=1',
      ]
    end
    flutter_additional_ios_build_settings(target)
  end
end

使用CDN而不是本地FC核心资产包

为了使用CDN上的FusionCharts，请在实例化FusionCharts小部件时将 isLocal 属性设置为 false：

FusionCharts fc = newFusionCharts(
...
isLocal: false
)

在项目中使用FusionCharts

创建一个利用FusionCharts小部件的dart文件。例如，创建一个简单的二维柱状图：

/// 使用flutter_fusioncharts来渲染柱状图的小部件
class ColumnChart extends StatefulWidget {
  const ColumnChart({super.key});

  @override
  State<ColumnChart> createState() => _ColumnChartState();
}

class _ColumnChartState extends State<ColumnChart> {
  late FusionCharts _fusionChart2D;
  FusionChartsController fusionChartsController = FusionChartsController();

  @override
  void initState() {
    super.initState();
    /// 定义图表配置参数，如标题、X轴和Y轴标签、样式等。有许多选项可以自定义图表。详情见：
    /// https://www.fusioncharts.com/dev/fusioncharts
    Map<String, dynamic> chart = {
      "caption": "Countries With Most Oil Reserves [2017-18]",
      "subCaption": "In MMbbl = One Million barrels",
      "logoURL": "https://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
      "logoAlpha": "100",
      "logoScale": "110",
      "logoPosition": "TL",
      "xAxisName": "Country",
      "yAxisName": "Reserves (MMbbl)",
      "numberSuffix": "K",
      "theme": "carbon",
      "baseFontSize": "35px",
      "captionFontSize": "35px",
      "subCaptionFontSize": "30px"
    };
    /// 提供图表的基础数据
    List<dynamic> chartData = [
      {"label": "Venezuela", "value": "290"},
      {"label": "Saudi", "value": "260"},
      {"label": "Canada", "value": "180"},
      {"label": "Iran", "value": "140"},
      {"label": "Russia", "value": "115"},
      {"label": "UAE", "value": "100"},
      {"label": "US", "value": "30"},
      {"label": "China", "value": "30"}
    ];

    /// 最终的数据源，用于传递给FusionCharts
    Map<String, dynamic> dataSource = {"chart": chart, "data": chartData};

    // 实例化FusionCharts小部件
    _fusionChart2D = FusionCharts(
        dataSource: dataSource, // 上面构造的地图
        type: "column2d", // 图表类型
        width: "100%", // 图表宽度（最佳结果使用100%）
        height: "100%", // 图表高度（通过Container/SizedBox管理页面大小）
        events: const ['chartClick'], // 指定要监听的图表事件列表。例如 `chartClick` 被设置
        fusionChartEvent: callBackFromPlugin, // 事件触发时的回调方法
        fusionChartsController: fusionChartsController, // 可选控制器，允许订阅、取消订阅和执行基于JavaScript的API
        licenseKey: licenseKey); // 可选，提供有效的许可证密钥以移除试验版水印
  }

  /// 从FusionCharts库触发的事件，触发此回调方法
  void callBackFromPlugin(senderId, eventType) {
    if (kDebugMode) {
      print('Event Back to consumer: $senderId , $eventType');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () => Navigator.of(context).pop()),
        title: const Text('Fusion Charts - Column'),
      ),
      body: SizedBox(
          height: MediaQuery.of(context).size.height / 2,
          child: _fusionChart2D),
    );
  }
}

在项目中使用事件和API

上述示例展示了如何在创建FusionCharts小部件时使用事件。你可以添加或删除事件，甚至调用FusionCharts API函数。你需要实例化FusionChartController以支持这些功能。

请注意，当你进行API调用时，需要确保全局变量 globalFusionChart 可用。在你提供的JS脚本中，可以通过引用 globalFusionChart 变量来定位图表对象（JavaScript）。

继续上面的例子，注意FusionChartController实例被传递给FusionChart小部件的构造函数。

/// 注册新事件，只需调用方法
fusionChartsController.addEvents('chartClick,dataLabelRollClick');
/// 取消现有事件，只需调用方法
fusionChartsController.removeEvents('chartClick,dataLabelRollClick');
/// 执行API调用，只需调用方法
String js = 'globalFusionCharts.chartType() == "doughnut3d" ? globalFusionCharts.chartType("doughnut2d") : globalFusionCharts.chartType("doughnut3d")';
fusionChartsController.executeScript(js);

/// 注意js按原样执行；因此，当你需要传递任何字符串数据时，需要将这些值保持在"<var>"中，例如'"doughnut3d"'而不是"doughnut3d"

向图表提供实时数据

如果你希望使用实时图表并提供周期性的实时数据，则应创建一个 StreamController 并将 StreamController 的引用传递给FusionChart小部件。随后，你可以发出数据，FusionChart会消费这些数据。每当流中接收到数据时，FusionChart将会相应地更新。

final streamController = StreamController<String>();

_fusionChart2D = FusionCharts(
...
...
streamController: streamController,
);

/// 随后在代码的任何地方推送新数据
streamController.add(nextData);