Flutter图表绘制插件chart_engine的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter图表绘制插件chart_engine的使用

chart_engine 是一个用于生成图表的Flutter插件，支持多种图表引擎，如ApexCharts和ChartJS。该插件可以自动处理不同引擎所需的配置，使得开发者无需阅读特定引擎的文档即可轻松创建图表。

支持的引擎

注意：您不需要阅读任何特定引擎的文档来使用chart_engine，因为生成图表所需的所有配置都将由该包自动处理（参见示例）。

使用方法

以下是一个简单的使用ApexCharts的例子（ChartJS被注释掉了）：

import 'dart:html';

// import 'package:chart_engine/chart_engine_chartjs.dart';
import 'package:chart_engine/chart_engine_apexcharts.dart';

void main() async {
  var series = ChartSeries(
    ['Jan', 'Feb', 'Mar'],
    {
      'A': [10, 20, 5],
      'B': [15, 25, 55],
      'C': [100, 130, 140]
    }
  );

  series.title = 'Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';
  series.options.fillLines = true;
  series.options.straightLines = true;

  // var charEngine = ChartEngineChartJS();
  var charEngine = ChartEngineApexCharts();
  await charEngine.load();
  charEngine.renderLineChart(querySelector('#output'), series);
}

完整示例Demo

以下是一个更完整的示例，展示了如何创建不同类型图表，包括折线图、时间序列图、柱状图、散点图等。

import 'dart:html';
import 'package:chart_engine/chart_engine_all.dart';

void main() async {
  querySelector('#apexcharts_version')!.text = ChartEngineApexCharts().version;
  querySelector('#chartjs_version')!.text = ChartEngineChartJS().version;

  await createLineChart();
  await createTimeSeriesChart();
  await createBarChart();
  await createScatterChart();
  await createScatterTimedChart();
  await createGaugeChart();
  await createFinancialChart();

  querySelector('#chart-version')!.text = ChartEngine.VERSION;
}

Future<void> createLineChart() async {
  var series = ChartSeries([
    'Jan',
    'Feb',
    'Mar'
  ], {
    'A': [10, 20, 5],
    'B': [15, 25, 55],
    'C': [100, 130, 140]
  });

  series.title = 'Line Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';
  series.options.straightLines = true;

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await charEngine1.load();
  await charEngine2.load();

  charEngine1.renderLineChart(querySelector('#apexcharts-line1-output')!, series);
  charEngine2.renderLineChart(querySelector('#chartjs-line1-output')!, series);

  series.options.fillLines = true;
  series.options.verticalLines = [VerticalLine(1, label: 'Mark', yPosition: 1)];

  charEngine1.renderLineChart(querySelector('#apexcharts-line2-output')!, series);
  charEngine2.renderLineChart(querySelector('#chartjs-line2-output')!, series);
}

Future<void> createTimeSeriesChart() async {
  var series = ChartTimeSeries({
    'A': [
      [DateTime(2020, 03, 30), 10],
      [DateTime(2020, 03, 31), 20],
      [DateTime(2020, 04, 01), 5],
      [DateTime(2020, 04, 02), -10],
      [DateTime(2020, 04, 03), 1]
    ],
    'B': [
      [DateTime(2020, 03, 30), 15],
      [DateTime(2020, 03, 31), 25],
      [DateTime(2020, 04, 01), 55],
      [DateTime(2020, 04, 02), 30],
      [DateTime(2020, 04, 03), -10]
    ],
    'C': [
      [100, DateTime(2020, 03, 30)],
      [DateTime(2020, 03, 31), 130],
      [DateTime(2020, 04, 01), 140],
      [DateTime(2020, 04, 02), -20],
      [DateTime(2020, 04, 03), -55]
    ],
  });

  series.title = 'Time Series Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderTimeSeriesChart(querySelector('#apexcharts-time_series-output')!, series);
  charEngine2.renderTimeSeriesChart(querySelector('#chartjs-time_series-output')!, series);
}

Future<void> createBarChart() async {
  var series = ChartSeries([
    'Jan',
    'Feb',
    'Mar'
  ], {
    'A': [10, 20, 5],
    'B': [15, 25, 55],
    'C': [100, 130, 140],
  });

  series.xTitle = 'Months';
  series.yTitle = 'Count';

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await Future.wait([charEngine1.load(), charEngine2.load()]);

  series.title = 'Bar Chart Example';
  charEngine1.renderBarChart(querySelector('#apexcharts-bar-output')!, series);
  charEngine2.renderBarChart(querySelector('#chartjs-bar-output')!, series);

  series.title = 'Horizontal Bar Chart Example';
  charEngine1.renderHorizontalBarChart(querySelector('#apexcharts-horizontal-bar-output')!, series);
  charEngine2.renderHorizontalBarChart(querySelector('#chartjs-horizontal-bar-output')!, series);
}

Future<void> createScatterChart() async {
  var series = ChartSeriesPair({
    'A': [
      [167.08, 61.25],
      [171.75, 66.77],
      [174.96, 75.11],
      [175.79, 88.40],
      [173.48, 78.86]
    ],
    'B': [
      [175.77, 50.87],
      [174.98, 72.38],
      [166.27, 52.59],
      [172.75, 66.85],
      [184.17, 90.71]
    ],
    'C': [
      [180.59, 98.12],
      [165.89, 58.20],
      [166.42, 50.33],
      [181.33, 78.01],
      [181.66, 101.91]
    ],
  });

  series.title = 'Scatter Chart Example';
  series.xTitle = 'Height';
  series.yTitle = 'Weight';

  var series2 = series.swapXY();

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderScatterChart(querySelector('#apexcharts-scatter-output')!, series2);
  charEngine2.renderScatterChart(querySelector('#chartjs-scatter-output')!, series2);
}

Future<void> createScatterTimedChart() async {
  var series = ChartTimeSeries({
    'A': [
      [DateTime(2020, 03, 30), 10],
      [DateTime(2020, 03, 31), 20],
      [DateTime(2020, 04, 01, 10), 5],
      [DateTime(2020, 04, 02, 3), -10],
      [DateTime(2020, 04, 03, 11), 1]
    ],
    'B': [
      [DateTime(2020, 03, 30, 2), 15],
      [DateTime(2020, 03, 31, 3), 25],
      [DateTime(2020, 04, 01, 12), 55],
      [DateTime(2020, 04, 02, 14), 30],
      [DateTime(2020, 04, 03, 2), -10]
    ],
    'C': [
      [100, DateTime(2020, 03, 30, 5)],
      [DateTime(2020, 03, 31, 4), 130],
      [DateTime(2020, 04, 01, 20), 140],
      [DateTime(2020, 04, 02, 23), -20],
      [DateTime(2020, 04, 03, 18), -55]
    ],
  });

  series.title = 'Scatter Timed Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderScatterTimedChart(querySelector('#apexcharts-scatter_timed-output')!, series);
  charEngine2.renderScatterTimedChart(querySelector('#chartjs-scatter_timed-output')!, series);
}

Future<void> createGaugeChart() async {
  var set = ChartSet({
    'A': 60,
    'B': 75,
    'C': 50,
  });

  set.title = 'Gauge Chart Example';

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderGaugeChart(querySelector('#apexcharts-gauge-output')!, set);
  charEngine2.renderGaugeChart(querySelector('#chartjs-gauge-output')!, set);
}

Future<void> createFinancialChart() async {
  var series = ChartTimeSeries({
    'StockX': [
      [DateTime(2020, 03, 30, 12), 10, 20, 10, 20],
      [DateTime(2020, 03, 31, 12), 20, 20, 2, 5],
      [DateTime(2020, 04, 01, 12), 5, 10, -10, -10],
      [DateTime(2020, 04, 02, 12), -10, 5, -15, 1],
      [DateTime(2020, 04, 03, 12), 1, 15, -1, 15],
      [DateTime(2020, 04, 04, 12), 15, 25, 10, 25],
      [DateTime(2020, 04, 05, 12), 25, 60, 25, 55],
      [DateTime(2020, 04, 06, 12), 55, 60, 40, 55],
      [DateTime(2020, 04, 07, 12), 55, 60, -10, -10],
      [DateTime(2020, 04, 08, 12), -10, -10, 0, 0]
    ],
    'StockY': [
      [DateTime(2020, 03, 30, 12), 100, 200, 100, 200],
      [DateTime(2020, 03, 31, 12), 200, 200, 20, 50],
      [DateTime(2020, 04, 01, 12), 50, 100, 30, 30],
      [DateTime(2020, 04, 02, 12), 30, 50, 20, 25],
      [DateTime(2020, 04, 03, 12), 30, 150, 10, 150],
      [DateTime(2020, 04, 04, 12), 150, 250, 100, 250],
      [DateTime(2020, 04, 05, 12), 250, 600, 250, 550],
      [DateTime(2020, 04, 06, 12), 550, 550, 300, 300],
      [DateTime(2020, 04, 07, 12), 300, 300, 20, 30],
      [DateTime(2020, 04, 08, 12), 30, 40, 0, 20]
    ],
  });

  series.xTitle = 'Months';
  series.yTitle = 'Value';
  series.options.straightLines = true;

  var charEngine2 = ChartEngineChartJS();

  charEngine2.colorGenerator = StandardColorGenerator.scheme('Financial');

  await charEngine2.loadFinancial();

  series.title = 'Financial Chart (OHLC) Example';
  charEngine2.renderFinancialChart(querySelector('#chartjs-financial-ohlc-output')!, series, ohlc: true);

  series.title = 'Financial Chart (Candlestick) Example';
  charEngine2.renderFinancialChart(querySelector('#chartjs-financial-candle-output')!, series, candlestick: true);
}

在线示例

您可以在这里查看在线示例。

如果您更喜欢从源代码中实验，请参考源代码中的示例，并按照README文件中的说明进行操作。

加载引擎的JavaScript库

此Dart包已经包含了每个支持引擎的JavaScript库。当实例化ChartEngine的实现时，相应的JavaScript库将自动加载，无需在您的Dart文件或HTML文件中添加额外的代码。

加载过程由amdjs.dart包完成。它使用AMD框架加载JavaScript库，如果检测到AMD实现，则会使用AMD框架加载；否则会注入<script src='lib-x.js'></script>标签作为回退方案。

特性和问题报告

请在问题跟踪器中提交功能请求和错误报告。

作者和许可证

该项目由Graciliano M. Passos开发，并遵循Apache License - Version 2.0许可证。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用chart_engine（请注意，这里我假设你指的是一个假想的或通用的图表绘制插件，因为没有一个广泛认可的名为chart_engine的Flutter插件。不过，大多数图表库的使用方式类似，这里以flutter_charts或mp_chart等常见图表库为例，展示如何绘制一个简单的图表）来绘制图表的示例代码。

首先，你需要在你的pubspec.yaml文件中添加图表库的依赖项（这里以mp_chart为例，因为它是一个流行的Flutter图表库）：

dependencies:
  flutter:
    sdk: flutter
  mp_chart: ^0.10.0  # 请检查最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤绘制一个简单的折线图：

  1. 导入必要的库：
import 'package:flutter/material.dart';
import 'package:mp_chart/mp/core/entry/Entry.dart';
import 'package:mp_chart/mp/chart/LineChart.dart';
import 'package:mp_chart/mp/data/LineData.dart';
import 'package:mp_chart/mp/data/LineDataSet.dart';
  1. 创建数据集：
List<Entry> values = List.generate(10, (i) => Entry(i.toDouble(), (i * i).toDouble()));

LineDataSet lineDataSet = LineDataSet(values, "Label")
  ..setColor(Colors.blue)
  ..setLineWidth(2.0)
  ..setCircleColor(Colors.red)
  ..setCircleRadius(3.0)
  ..setDrawCircleHole(true)
  ..setValueTextSize(9.0)
  ..setDrawValues(true);

LineData lineData = LineData(lineDataSet);
  1. 在Widget中构建图表：
class MyChart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Chart Example'),
      ),
      body: Center(
        child: LineChart(
          lineData,
        ),
      ),
    );
  }
}
  1. 在main.dart中使用MyChart：
void main() {
  runApp(MaterialApp(
    home: MyChart(),
  ));
}

这个示例展示了如何使用mp_chart库在Flutter中创建一个简单的折线图。你可以根据需要调整数据集、样式和其他配置选项来定制你的图表。

如果你确实在寻找一个名为chart_engine的特定插件，并且它不是上述提到的库之一，那么请确保你查找了正确的库名，并参考该库的官方文档或GitHub仓库中的示例代码。大多数图表库的使用方式都大同小异，通常包括导入库、创建数据集、配置图表样式和将图表添加到Widget树中这几个步骤。

回到顶部