フラッタチャートでのライブデータの更新

多くのアプリケーションでは、時間とともに変化するデータを公開する必要があります.リアルタイムのグラフを動的にデータを変更表示するに便利です.グラフを使用することで、情報を簡単に伝えることができます.
統合Flutter Charts データを可視化するための巧みに作られたチャートウィジェットです.それは30 +チャートやグラフの豊富なギャラリーが含まれ、ラインから金融チャートに至るまで、すべてのチャートのシナリオに応える.フラッターチャートでは、ライブデータを表示することができます数分または秒で変更.
このブログは、SyncFusionフラッターチャートを使用してアプリケーションでライブデータを更新して可視化する完全なガイドです.

Updating data points .

Updating series .

Updating data on demand .

方法
フラッタチャートでは、グラフデータポイントを更新するには、次のいずれかの方法を使用できます.

呼び出しsetState() メソッド.

使用するupdateDataSource() メソッドChartSeriesController クラス.

setStart ()メソッドは、再びグラフを処理します.UpdateDataSource ()メソッドは、データソース内の変更された項目のみを処理し、それに基づいて対応するシリーズを再描画します.
したがって、グラフデータの膨大な量を持っている場合、より良いパフォーマンスのためにsetStatus ()メソッドを呼び出す代わりに、UpdateDataSource ()メソッドを使用することを提案します.

データポイントの更新
この節では、フラッタチャートのデータソースのデータポイントを変更、追加、および削除する方法を示します.

データポイントの値を更新する
データポイントの値を更新するにはdata source setstat ()メソッドを使用します.
次の例では、ボタンのonpresse ()イベントでsetStatus ()メソッドを呼び出しました.

/// Specifies the list of chart sample data.
List<ChartSampleData> chartData = <ChartSampleData>[
  ChartSampleData(x: 1, y: 30),
  ChartSampleData(x: 3, y: 13),
  ChartSampleData(x: 5, y: 80),
  ChartSampleData(x: 7, y: 30),
  ChartSampleData(x: 9, y: 72)
];

/// Creates an instance of random to generate the random number.
final Random random = Random();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        child: SfCartesianChart(
          primaryXAxis: NumericAxis(),
          primaryYAxis: NumericAxis(),
          series: <ColumnSeries<ChartSampleData, num>>[
            ColumnSeries<ChartSampleData, num>(
              dataSource: chartData,
              xValueMapper: (ChartSampleData data, _) => data.x,
              yValueMapper: (ChartSampleData data, _) => data.y,
              dataLabelSettings: DataLabelSettings(isVisible: true)
            ),
          ],
        )
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () => setState(() {
        chartData = <ChartSampleData>[];
        chartData = _getChartData();
      }),
      child: const Icon(Icons.refresh, color: Colors.white),
    )
  );
}

/// Get the random value.
num _getRandomInt(int min, int max) {
  return min + random.nextInt(max - min);
}

/// Method to update the chart data.
List<ChartSampleData> _getChartData() {
  chartData.add(ChartSampleData(x: 1, y: _getRandomInt(10, 100)));
  chartData.add(ChartSampleData(x: 3, y: _getRandomInt(10, 100)));
  chartData.add(ChartSampleData(x: 5, y: _getRandomInt(10, 100)));
  chartData.add(ChartSampleData(x: 7, y: _getRandomInt(10, 100)));
  chartData.add(ChartSampleData(x: 9, y: _getRandomInt(10, 100)));
  return chartData;
}

フラッタチャートにおけるデータポイントの更新
詳細についてはUpdating the Existing Flutter Chart Data Point Value プロジェクトデモ.

データポイントの追加と削除
さらに進むには、updateDataSource() メソッドupdate the data source of the Flutter Charts .

データポイントの追加
さて、これらの手順に従って、既存のデータポイントを追加しますdata source コレクションと更新それはフラッターチャートに住んでいます.
ステップ1:既存のグラフデータに所望のデータポイントを追加します.

List<ChartSampleData> _addDataPoint() {
  final int length = chartData.length;
  chartData.add(ChartSampleData(x: length, y: _getRandomInt(10, 100)));
  return chartData;
}                        

手順2 :次に、ChartSeriesControllerクラスでUpdateDataSourse ()メソッドを呼び出します.追加したインデックス位置をadddDataIndexesに割り当てます.
次のコード例を参照してください.

IconButton(
  onPressed: () {
    chartData = _addDataPoint();
    _chartSeriesController?.updateDataSource(
      addedDataIndexes: <int>[chartData.length - 1],
    );
  },
);

データポイントの削除
これらの手順に従って、ChartSeriesControllerクラスのUpdateDataSourceCase ()を呼び出して、既存のコレクションからフラッタグラフデータポイントを削除します.
手順1 :グラフのデータソースから不要なデータポイントを削除します.

/// Remove the data point from the series.
List<ChartSampleData> _removeDataPoint() {
  if (chartData.isNotEmpty) {
    chartData.removeAt(chartData.length - 1);
  }
  return chartData;
}

手順2 :次に、削除されたインデックス位置をUpdatedDataIndexおよびRemovedDataIndexに割り当てることにより、ChartSeriesControllerクラスのUpdateDataSource ()メソッドを呼び出します.
次のコード例を参照してください.

IconButton(
  onPressed: () {
    if (chartData.length > 1) {
      chartData = _removeDataPoint();
      _chartSeriesController?.updateDataSource(
        updatedDataIndexes: <int>[chartData.length - 1],
        removedDataIndexes: <int>[chartData.length - 1],
      );
    }
  },
)

注意:データポイントのコード例の追加と削除の両方で、ChartDataはdata source 読み込み時のチャートのプロパティ.
フラッタチャートにおけるデータポイントの追加と削除
詳細についてはAdding/Removing Data Points in the Flutter Charts プロジェクトデモ.

更新シリーズ
の方法を追加または削除する方法を参照してくださいseries setstat ()メソッドを使用したグラフのコレクションです.

シリーズ追加
ステップ1:フラッタチャートの既存のシリーズコレクションにシリーズを追加します.

/// Add series into the chart.
void addSeries() {
  final List<ChartSampleData> chartData1 = <ChartSampleData>[];
  for (int i = 0; i <= 6; i++) {
    chartData1.add(ChartSampleData(x: i, y: _getRandomInt(10, 50)));
  }
  series.add(LineSeries<ChartSampleData, int>(
    key: ValueKey<String>('${series.length}'),
    dataSource: chartData1,
    xValueMapper: (ChartSampleData sales, _) => sales.x as int,
    yValueMapper: (ChartSampleData sales, _) => sales.y,
  ));
}                         

ステップ2 :次に、追加された一連のグラフを更新するには、ボタンのOnSENTイベントでsetStatus ()を使用してaddSerams ()メソッドを呼び出します.
次のコード例を参照してください.

IconButton(
  icon: Icon(Icons.add_circle, size: 50),
  onPressed: () {
    setState(() {
      addSeries();
    });
  }
)                          

シリーズ削除
ステップ1:フラッタチャートシリーズコレクションから不要なシリーズを削除します.

///Remove the series from chart.
void removeSeries() {
  if (series.isNotEmpty) {
    series.removeLast();
  }
}                          

Step 2 :ボタンの押下されたイベントで、setStest ()メソッドを使用して削除された一連のメソッドを更新します.

IconButton(
  icon: Icon(Icons.remove_circle, size: 50),
  onPressed: () => setState(() {
    removeSeries();
  }),
)                          

注:AddとRemoveシリーズの例では、一連のシリーズは、フラッタチャートウィジェットのシリーズプロパティに割り当てられた一連のコレクションです.
フラッタチャートのシリーズの追加と削除
詳細についてはAdd/Remove Series Dynamically in a Flutter Chart プロジェクトデモ.

オンデマンドデータの更新
このセクションでは、我々は活発に特定の間隔で、ユーザーの相互作用で自動的にフラッターチャートデータを更新する方法を参照してください.

定期的にデータを更新する
SyncFusionフラッタチャートウィジェットを簡単に定期的に更新することができますリアルタイムチャートとして機能します.このためには、ChartSeriesControllerのUpdateDataSource ()メソッドを使用します.
手順1 :グラフデータソースのデータポイントの追加または削除などの必要なアクティビティーを実行しますprevious section . 次に、UpdateDataSource ()を使用して、新しいデータポイントに基づいてグラフを更新します.

/// Continuously updating the data source based on timer.
void _updateDataSource(Timer timer) {
  chartData.add(_ChartData(count, _getRandomInt(10, 100)));
  if (chartData.length == 20) {
    chartData.removeAt(0);
    _chartSeriesController?.updateDataSource(
      addedDataIndexes: <int>[chartData.length - 1],
      removedDataIndexes: <int>[0],
    );
  } else {
    _chartSeriesController?.updateDataSource(
      addedDataIndexes: <int>[chartData.length - 1],
    );
  }
  count = count + 1;
}                         

Step 2 :周期タイマーを初期化します.タイマーイベントでUpdateDataSourceメソッドを呼び出し、グラフデータを特定の時間間隔で連続的に更新します.
次のコード例を参照してください.

Timer? timer;

@override
void initState() {
  super.initState();
  timer = Timer.periodic(const Duration(milliseconds: 100), _updateDataSource);
}                          

定期的なフラッタチャートデータの更新
詳細についてはUpdating Live Data On-Time in Flutter Line Charts プロジェクトデモ.

相互作用
このセクションでは、動的にユーザーの相互作用(ドラッグとタップ)に基づいてフラッタチャートのライブデータを更新する方法を説明します.

ドラッグで
進む前にOn-demand loading in Flutter Cartesian Charts documentation .
さて、チャートエリアでドラッグしてフラッタチャートの目に見えるデータポイントを更新する方法を見てみましょう.
ここでは、可視軸範囲がその端に達すると、要求に応じてデータをロードしますloadMoreIndicatorBuilder フラッタチャートウィジェットのプロパティ
ステップ1 :有効にするenablePanning プロパティZoomPanBehavior グラフ領域をドラッグするクラス.
ステップ2 :次に、より多くのデータをロードするウィジェットを作成しますaxis visible range ドラッグ中に最後に達する.
ステップ3:次に、更新されたデータがグラフに表示されるまで、循環進行インジケータを返します.
次のコード例を参照してください.

/// Returns the load more indicator builder.
Widget getloadMoreIndicatorBuilder(
  BuildContext context, ChartSwipeDirection direction) {
    if (direction == ChartSwipeDirection.end) {
      isNeedToUpdateView = true;
      globalKey = GlobalKey<State>();
      return StatefulBuilder(
        key: globalKey,
        builder: (BuildContext context, StateSetter stateSetter) {
          Widget widget;
          if (isNeedToUpdateView) {
            widget = getProgressIndicator();
            _updateView();
            isDataUpdated = true;
          } else {
            widget = Container();
          }
          return widget;
        });
    } else {
      return SizedBox.fromSize(size: Size.zero);
    }
  }
)                          

ステップ4 :以前に説明したように、グラフの新しく追加されたデータインデックスを更新して表示するには、ChartSeriesControllerクラスのUpdateDataSource ()メソッドを使用します.

/// Update the chart view based on the newly added data points.
  Future<void> _updateView() async {
    await Future<void>.delayed(const Duration(seconds: 1), () {
      isNeedToUpdateView = false;
      if (isDataUpdated) {
        _updateData();
        isDataUpdated = false;
      }
      if (globalKey.currentState != null) {
        (globalKey.currentState as dynamic).setState(() {});
      }
    });
  }

  /// Method to add new data points to the chart source.
  void _updateData() {
    for (int i = 0; i < 4; i++) {
      chartData.add(ChartSampleData(
          xValue: chartData[chartData.length - 1].xValue + 1,
          y: getRandomInt(0, 600)));
    }
    isLoadMoreView = true;
    seriesController?.updateDataSource(addedDataIndexes: getIndexes(4));
  }

  /// Returns the newly added indexes value.
  List<int> getIndexes(int length) {
    final List<int> indexes = <int>[];
    for (int i = length - 1; i >= 0; i--) {
      indexes.add(chartData.length - 1 - i);
    }
    return indexes;
  }                          

フラッタチャートにおける相互作用のドラッグによるデータの更新
詳細についてはInfinite Scrolling in Flutter Charts プロジェクトデモ.

タップで
このセクションでは、グラフシリーズの最後のデータポイントからタップポイントでグラフシリーズを描画する方法を示します.これを達成するために、我々はonChartTouchInteractionUp グラフ領域のタップ位置を取得します.論理ピクセル値をグラフポイント値に変換するには、pixelToPoint ChartSeriesControllerクラスのメソッド.
次のコード例を参照してください.

onChartTouchInteractionUp: (ChartTouchInteractionArgs args) {
  final Offset value = Offset(args.position.dx, args.position.dy);
  CartesianChartPoint<dynamic> chartpoint;
  chartpoint = seriesController!.pixelToPoint(value);
  chartData.add(ChartSampleData(x: chartpoint.x, y: chartpoint.y));
  setState(() {});
}                         

フラッタチャートをタップして新しいデータポイントを追加する
詳細についてはAdding Point On-Click in the Flutter Cartesian Charts プロジェクトデモ.

ページ
また、あなたとフラッタチャートでページ化を達成することができますonPlotAreaSwipe プロパティ.これは簡単にグラフ内の所望のデータに移動するのに役立ちます.
フラッタチャートにおけるペグネーション
詳細についてはPagination in the Flutter Charts demo .

結論
読書ありがとう!このブログの記事では、SyncFusionを使用してリアルタイムアプリケーションでのライブデータを更新する方法を見てきたFlutter Charts widget . このブログ記事で与えられた手順を試してみて、あなたのリアルタイムチャートで手間のかからないライブアップデートをお楽しみください.
閲覧我々documentation syncfusionの詳細についてはFlutter widgets . また、この多くの例で我々のSyncFusionフラッターアプリを見ることができますGitHub repository . 我々のデモアプリをお見逃しなくGoogle Play , App Store , the web , Windows Store , macOS , and Snapcraft (Linux) .
あなたがまだ顧客でないならば、あなたは我々の30日を試すことができますfree trial 私たちのフラッター機能をチェックアウトします.
最後に、あなたが私たちにフィードバックを送信したい場合、または任意の質問を提出したいと思います、このブログの投稿のコメントのセクションでそれらを投稿してください.また、我々を介してお問い合わせすることができますsupport forums , feedback portal , or Direct-Trac support system . 我々は常にあなたを支援して満足している!

関連ブログ