Flutter图表绘制插件modern_charts的使用

modern_charts是一个用于创建现代且简洁图表的 Flutter 包。它支持多种图表类型，并结合了 Canvas 和 DOM 来实现最佳性能和用户体验。

支持的图表类型

1. 柱状图（Bar Chart）

2. 仪表盘（Gauge Chart）

3. 折线图（Line Chart）

4. 饼图（Pie Chart）

5. 雷达图（Radar Chart）

特性

• Canvas + DOM: modern_charts 结合了 Canvas 和 DOM，以实现高性能和良好的用户体验。

  • Canvas 用于渲染图表内容（如坐标轴、网格和数据系列）。
  • DOM 用于创建图例和工具提示。

• 灵活性: 数据通过 DataTable 对象传递给图表。使用 DataTable，即使在图表渲染后也可以灵活修改数据。

• 动画: 支持多种数据修改方式的动画：

  • 新的数据表。
  • 修改数据表中的值。
  • 插入或移除行（类别）。
  • 插入或移除列（数据系列）。
  • 切换数据系列的可见性。

• 响应式: 图表会自动调整大小以适应浏览器窗口的变化。

• 交互性: 提供悬停/点击时显示工具提示的功能；单击图例项可以切换数据系列的可见性。

• 模块化: 每种图表类型都有自己的类，因此最终生产代码只包含使用的图表类型的代码。

使用方法

以下是一个完整的示例，展示了如何使用 modern_charts 创建不同类型的图表。

import 'dart:html';
import 'package:modern_charts/modern_charts.dart';
import 'dart:math';

final random = Random();

int rand(int min, int max) => random.nextInt(max - min) + min;

void main() {
  createBarChart();
  createLineChart();
  createPieChart();
  createRadarChart();
  createGaugeChart();
}

Element createContainer() {
  var e = DivElement()
    ..style.height = '400px'
//    ..style.width = '800px'
    ..style.maxWidth = '100%'
    ..style.marginBottom = '50px';
  document.body.append(e);
  return e;
}

// 创建柱状图
void createBarChart() {
  var table = DataTable([
    ['Categories', 'Long series name', 'Series 2', 'Series 3'],
    ['January', 1, 3, 5],
    ['February', 3, 4, 6],
    ['March', 4, 3, 1],
    ['April', null, 5, 1],
    ['May', 3, 4, 2],
    ['June', 5, 10, 4],
    ['July', 4, 12, 8],
    ['August', 1, 3, 5],
    ['September', 3, 4, 6],
    ['October', 4, 3, 1],
    ['November', null, 5, 1],
    ['December', 3, 4, 2],
  ]);

  var changeDataButton = ButtonElement()..text = 'Change data';
  document.body.append(changeDataButton);

  var insertRemoveColumnButton = ButtonElement()
    ..text = 'Insert/remove data column';
  document.body.append(insertRemoveColumnButton);

  var insertRemoveRowButton = ButtonElement()..text = 'Insert/remove data row';
  document.body.append(insertRemoveRowButton);

  var container = createContainer();

  var options = {
    'animation': {
      'onEnd': () {
        changeDataButton.disabled = false;
        insertRemoveColumnButton.disabled = false;
        insertRemoveRowButton.disabled = false;
      }
    },
    'series': {
      'labels': {'enabled': true}
    },
    'xAxis': {
      'crosshair': {'enabled': true},
      'labels': {'maxRotation': 90, 'minRotation': 0}
    },
    'yAxis': {'minValue': 0, 'minInterval': 5},
    'title': {'text': 'Bar Chart Demo'},
    'tooltip': {'valueFormatter': (value) => '$value units'}
  };

  var chart = BarChart(container);
  chart.draw(table, options);

  void disableAllButtons() {
    changeDataButton.disabled = true;
    insertRemoveColumnButton.disabled = true;
    insertRemoveRowButton.disabled = true;
  }

  changeDataButton.onClick.listen((_) {
    disableAllButtons();
    for (var row in table.rows) {
      for (var i = 1; i < table.columns.length; i++) {
        row[i] = rand(2, 20);
      }
    }
    chart.update();
  });

  var insertColumn = true;
  insertRemoveColumnButton.onClick.listen((_) {
    disableAllButtons();
    if (insertColumn) {
      table.columns.insert(2, DataColumn('New series', num));
      for (var row in table.rows) {
        row[2] = rand(2, 20);
      }
    } else {
      table.columns.removeAt(2);
    }
    insertColumn = !insertColumn;
    chart.update();
  });

  var insertRow = true;
  insertRemoveRowButton.onClick.listen((_) {
    disableAllButtons();
    if (insertRow) {
      var values = <dynamic>['New'];
      for (var i = 1; i < table.columns.length; i++) {
        values.add(rand(2, 20));
      }
      table.rows.insert(2, values);
    } else {
      table.rows.removeAt(2);
    }
    insertRow = !insertRow;
    chart.update();
  });
}

// 其他图表的创建逻辑类似，以下是折线图的示例
void createLineChart() {
  var table = DataTable([
    ['Categories', 'Series 1', 'Series 2', 'Series 3'],
    ['Monday', 1, 3, 5],
    ['Tuesday', 3, 4, 6],
    ['Wednesday', 4, 3, 1],
    ['Thursday', null, 5, 1],
    ['Friday', 3, 4, 2],
    ['Saturday', 5, 10, 4],
    ['Sunday', 4, 12, 8]
  ]);

  // 按钮和容器初始化逻辑与上面类似...

  var options = {
    'animation': {
      'onEnd': () {
        // 启用按钮...
      }
    },
    'series': {
      'fillOpacity': 0.25,
      'labels': {'enabled': true},
    },
    'yAxis': {'minInterval': 5},
    'title': {'text': 'Line Chart Demo'}
  };

  var chart = LineChart(container);
  chart.draw(table, options);

  // 动画和按钮控制逻辑与上面类似...
}

// 其他图表的创建逻辑类似，包括饼图、雷达图和仪表盘。