Flutter中如何使用charting_library库

在Flutter项目中集成charting_library库时遇到困难，官方文档不太清晰。想请教：

  1. 如何正确添加charting_library到pubspec.yaml依赖？
  2. 是否有必要对Android/iOS进行额外配置？
  3. 能否提供一个简单的K线图实现示例代码？
  4. 这个库支持实时数据更新吗？如何实现？
  5. 常见报错"Failed to load widget"该如何解决？
2 回复

在Flutter中使用charting_library库，需先添加依赖到pubspec.yaml文件。然后导入库，使用ChartWidget组件并传入数据配置即可绘制图表。

更多关于Flutter中如何使用charting_library库的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 charting_library（通常指 TradingView 的高级图表库）需要结合 WebView 来实现，因为该库是基于 JavaScript 的。以下是基本步骤和示例代码：

步骤：

  1. 添加依赖：在 pubspec.yaml 中添加 webview_flutter 插件。
  2. 准备 HTML 文件：将 TradingView 的 charting_library 文件放入项目资源中。
  3. 配置 WebView：加载本地 HTML 文件并传递参数。

示例代码：

  1. 添加依赖：
dependencies:
  webview_flutter: ^4.4.2
  1. 准备资源文件：
    • 在项目根目录创建 assets 文件夹，放入 charting_library 文件。
    • 在 pubspec.yaml 中配置资源：
flutter:
  assets:
    - assets/charting_library/
  1. 创建 HTML 文件（如 assets/chart.html）：
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="charting_library/charting_library.min.js"></script>
</head>
<body>
  <div id="tv_chart_container"></div>
  <script type="text/javascript">
    new TradingView.widget({
      container_id: "tv_chart_container",
      symbol: "BTCUSDT",
      interval: "1D",
      library_path: "charting_library/",
      locale: "en"
    });
  </script>
</body>
</html>
  1. Flutter 页面中使用 WebView：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class ChartPage extends StatelessWidget {
  final WebViewController controller = WebViewController()
    ..loadFlutterAsset('assets/chart.html');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TradingView Chart')),
      body: WebViewWidget(controller: controller),
    );
  }
}

注意事项：

  • 文件路径：确保 chart.html 和 charting_library 文件夹在 assets 中路径正确。
  • WebView 权限：Android 和 iOS 可能需要额外配置（如网络权限）。
  • 动态参数：可通过 JavaScript 通道传递数据（如修改交易对）。

如需更复杂功能（如实时数据），需结合后端 API 或 WebSocket 实现。

回到顶部