如何在Flutter中通过WebView集成Lightweight Charts图表库

1. 添加Flutter WebView依赖 #

在项目的pubspec.yaml中添加webview_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 使用最新稳定版本

执行flutter pub get完成依赖安装。

2. 整合HTML、CSS与JavaScript代码 #

将你的CSS样式、Lightweight Charts的unpkg引入、时间区间切换逻辑整合为完整的HTML字符串，示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightweight Charts Demo</title>
    <style>
        /* 替换为你的实际CSS样式 */
        body { margin: 0; padding: 10px; font-family: Arial, sans-serif; }
        .time-buttons { margin-bottom: 10px; }
        .time-buttons button { padding: 8px 16px; margin-right: 8px; cursor: pointer; }
        #chart-container { width: 100%; height: 400px; }
    </style>
</head>
<body>
    <div class="time-buttons">
        <button onclick="switchTimeframe('1D')">1天</button>
        <button onclick="switchTimeframe('1W')">1周</button>
        <button onclick="switchTimeframe('1M')">1月</button>
    </div>
    <div id="chart-container"></div>

    <script src="https://unpkg.com/lightweight-charts@3.8.0/dist/lightweight-charts.standalone.production.js"></script>
    <script>
        // 初始化图表
        const chart = LightweightCharts.createChart(document.getElementById('chart-container'), {
            width: document.getElementById('chart-container').clientWidth,
            height: 400,
            timeScale: { timeVisible: true, secondsVisible: false },
        });
        const candlestickSeries = chart.addCandlestickSeries();

        // 替换为你的实际时间区间数据
        const timeframeData = {
            '1D': [
                { time: '2024-05-20', open: 100, high: 105, low: 98, close: 102 },
                { time: '2024-05-21', open: 102, high: 108, low: 100, close: 106 },
                { time: '2024-05-22', open: 106, high: 110, low: 104, close: 109 },
            ],
            '1W': [
                { time: '2024-05-13', open: 95, high: 103, low: 92, close: 100 },
                { time: '2024-05-20', open: 100, high: 108, low: 98, close: 106 },
                { time: '2024-05-27', open: 106, high: 112, low: 104, close: 110 },
            ],
            '1M': [
                { time: '2024-04-01', open: 85, high: 98, low: 82, close: 95 },
                { time: '2024-05-01', open: 95, high: 108, low: 92, close: 106 },
                { time: '2024-06-01', open: 106, high: 115, low: 102, close: 113 },
            ]
        };

        // 时间区间切换逻辑
        function switchTimeframe(timeframe) {
            candlestickSeries.setData(timeframeData[timeframe]);
            chart.timeScale().fitContent();
        }

        // 初始加载1天数据
        switchTimeframe('1D');

        // 适配窗口大小变化
        window.addEventListener('resize', () => {
            chart.applyOptions({ width: document.getElementById('chart-container').clientWidth });
        });
    </script>
</body>
</html>

3. 在Flutter中加载WebView #

创建Flutter页面，使用WebViewWidget加载上述HTML字符串：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class LightweightChartsPage extends StatefulWidget {
  const LightweightChartsPage({super.key});

  @override
  State<LightweightChartsPage> createState() => _LightweightChartsPageState();
}

class _LightweightChartsPageState extends State<LightweightChartsPage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化WebViewController，必须启用JavaScript
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadHtmlString(_buildHtmlContent());
  }

  // 构建HTML内容字符串
  String _buildHtmlContent() {
    return '''
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lightweight Charts Demo</title>
    <style>
        body { margin: 0; padding: 10px; font-family: Arial, sans-serif; }
        .time-buttons { margin-bottom: 10px; }
        .time-buttons button { padding: 8px 16px; margin-right: 8px; cursor: pointer; }
        #chart-container { width: 100%; height: 400px; }
    </style>
</head>
<body>
    <div class="time-buttons">
        <button onclick="switchTimeframe('1D')">1天</button>
        <button onclick="switchTimeframe('1W')">1周</button>
        <button onclick="switchTimeframe('1M')">1月</button>
    </div>
    <div id="chart-container"></div>

    <script src="https://unpkg.com/lightweight-charts@3.8.0/dist/lightweight-charts.standalone.production.js"></script>
    <script>
        const chart = LightweightCharts.createChart(document.getElementById('chart-container'), {
            width: document.getElementById('chart-container').clientWidth,
            height: 400,
            timeScale: { timeVisible: true, secondsVisible: false },
        });
        const candlestickSeries = chart.addCandlestickSeries();

        const timeframeData = {
            '1D': [
                { time: '2024-05-20', open: 100, high: 105, low: 98, close: 102 },
                { time: '2024-05-21', open: 102, high: 108, low: 100, close: 106 },
                { time: '2024-05-22', open: 106, high: 110, low: 104, close: 109 },
            ],
            '1W': [
                { time: '2024-05-13', open: 95, high: 103, low: 92, close: 100 },
                { time: '2024-05-20', open: 100, high: 108, low: 98, close: 106 },
                { time: '2024-05-27', open: 106, high: 112, low: 104, close: 110 },
            ],
            '1M': [
                { time: '2024-04-01', open: 85, high: 98, low: 82, close: 95 },
                { time: '2024-05-01', open: 95, high: 108, low: 92, close: 106 },
                { time: '2024-06-01', open: 106, high: 115, low: 102, close: 113 },
            ]
        };

        function switchTimeframe(timeframe) {
            candlestickSeries.setData(timeframeData[timeframe]);
            chart.timeScale().fitContent();
        }

        switchTimeframe('1D');

        window.addEventListener('resize', () => {
            chart.applyOptions({ width: document.getElementById('chart-container').clientWidth });
        });
    </script>
</body>
</html>
    ''';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Lightweight Charts 演示')),
      body: WebViewWidget(controller: _controller),
    );
  }
}

4. 测试运行 #

启动Flutter应用并打开该页面，即可看到带有时间区间切换按钮的Lightweight Charts图表，点击按钮可切换对应时间维度的数据。

内容的提问来源于stack exchange，提问作者Shamsudeen McHalwai