Flutter图表展示插件highcharts_js的使用

Flutter图表展示插件highcharts_js的使用

高级图表包用于Flutter

一个用于在Flutter中使用High Charts的插件。

pub package popularity pub points building

使用方法

要使用此插件，请访问使用文档。

示例代码

以下是一个完整的示例代码，展示如何在Flutter中使用highchartjs插件。

import 'dart:convert';

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: ExampleChart());
  }
}

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

  [@override](/user/override)
  ExampleChartState createState() => ExampleChartState();
}

class ExampleChartState extends State<ExampleChart> {
  // 定义数据点
  final datapoints = [
    HighChartsSeries(
      name: '血糖值',
      data: [
        HighChartsDataPoint(x: 1728447676000, y: 60), // 时间戳表示日期
        HighChartsDataPoint(x: 1728447676000, y: 105),
        HighChartsDataPoint(x: 1728620476000, y: 110),
        HighChartsDataPoint(x: 1728706876000, y: 128),
        HighChartsDataPoint(x: 1728793276000, y: 128),
      ],
    ),
    HighChartsSeries(
      name: '乳酸值',
      data: [
        HighChartsDataPoint(x: 1728447676000, y: 20),
        HighChartsDataPoint(x: 1728620476000, y: 80),
        HighChartsDataPoint(x: 1728706876000, y: 90),
        HighChartsDataPoint(x: 1728793276000, y: 70),
        HighChartsDataPoint(x: 1728793276000, y: 100),
      ],
    ),
    HighChartsSeries(
      name: '评论系列',
      data: [
        HighChartsDataPoint(x: 1728447676000, y: 0),
        HighChartsDataPoint(x: 1728620476000, y: 0),
        HighChartsDataPoint(x: 1728706876000, y: 0),
        HighChartsDataPoint(x: 1728793276000, y: 0),
        HighChartsDataPoint(x: 1728793276000, y: 0),
      ],
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 定义图表选项
    HighChartsOptions chartOptions = HighChartsOptions(
      chartType: 'line', // 图表类型为线图
      title: HighChartsTitle(text: '血糖值与乳酸值随时间变化'), // 图表标题
      yAxis: HighChartsYAxis(
        title: HighChartsAxisTitle(text: '血糖值 (mg/dL)'), // Y轴标题
      ),
      xAxis: HighChartsXAxis(
        type: 'datetime', // X轴类型为时间轴
        title: HighChartsAxisTitle(text: '日期'), // X轴标题
        labels: HighChartsAxisLabels(format: '{value:%Y-%m-%d}'), // X轴标签格式化
      ),
      series: datapoints, // 数据点
    );

    return Scaffold(
      backgroundColor: Colors.teal,
      appBar: AppBar(
        centerTitle: true,
        title: const Text('High Charts 示例应用'), // 应用标题
      ),
      body: Row(
        children: [
          Expanded(
            child: HighCharts(
              options: chartOptions, // 图表选项
              loader: const SizedBox(
                width: 200,
                child: LinearProgressIndicator(), // 加载指示器
              ),
              size: const Size(700, 700), // 图表大小
              onEventTriggered: (eventData) {
                // 处理事件触发
                print(eventData);
              },
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter图表展示插件highcharts_js的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图表展示插件highcharts_js的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


highcharts_js 是一个用于在 Flutter 应用中展示 Highcharts 图表的插件。它通过 WebView 将 Highcharts 嵌入到 Flutter 应用中，允许你使用 Highcharts 的所有功能来创建交互式图表。

以下是如何在 Flutter 项目中使用 highcharts_js 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 highcharts_js 依赖：

dependencies:
  flutter:
    sdk: flutter
  highcharts_js: ^1.0.0  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用 Highcharts 的 Dart 文件中导入 highcharts_js 包：

import 'package:highcharts_js/highcharts_js.dart';

3. 创建 Highcharts 图表

使用 HighCharts 小部件来创建图表。你需要提供一个包含 Highcharts 配置的 JSON 字符串。

class MyChart extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HighCharts Example'),
      ),
      body: HighCharts(
        data: '''
        {
          "chart": {
            "type": "line"
          },
          "title": {
            "text": "Monthly Average Temperature"
          },
          "xAxis": {
            "categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
          },
          "yAxis": {
            "title": {
              "text": "Temperature (°C)"
            }
          },
          "series": [{
            "name": "Tokyo",
            "data": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
            "name": "London",
            "data": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]
        }
        ''',
      ),
    );
  }
}

4. 运行应用

在你的 main.dart 文件中运行应用：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HighCharts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyChart(),
    );
  }
}
回到顶部