所得と支出を可視化するためのベスト7フラッターチャート

収入と費用の追跡は、それが起動または確立された会社ならば、どんなビジネスにも重要です.起業家のために、収入と支出は、彼らのビジネスを実行する方法を評価するために追跡するために必要な最初のものになります.グラフは、これらの数字を視覚化する重要な役割を果たしている.しかし、慎重に情報を伝えるために慎重にデータストーリーの適切なグラフの種類を選択する必要があります.このブログでは、あなたの収入と費用の詳細を視覚化するための7つの最高のグラフの種類を介してあなたを歩いていきます.
使用しているSyncfusion Flutter Charts ウィジェットは、グラフの種類を説明するが、彼らはフラッターに限定されませんし、同様に他のプラットフォームでこれらのグラフの種類を見つけるでしょう.

φ1カラムチャート

The column chart , また、垂直棒グラフとして知られ、垂直バーを使用して1つまたは複数の項目の異なる値を表示します.これは、カテゴリ全体の値を比較するために使用される最も一般的なグラフの種類です.
私たちのケースでは、様々なカテゴリに分かれて、単一の年のデータを比較するなど、様々な年の間にあなたの収入と費用の詳細を比較するような様々なシナリオを可視化することができます、競合他社などの詳細を比較します.
次の例では、2つのコラムシリーズを使って数年の収入と費用の詳細を示します.
この列は、過去の収入と費用の詳細を示しています.
あなたはColumnSeries クラスでSfCartesianChart からのウィジェットSyncfusion Flutter Charts を返します.次のコードスニペットがこれを示します.

SfCartesianChart(
  series: <ColumnSeries<ChartData, num>>[
    ColumnSeries<ChartData, num>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    ),
    ColumnSeries<ChartData, num>(
      dataSource: expenseData, 
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Expense'
    )
  ]
)

同様に、あなたはstacked column 場合は、収入と費用の列を分割し、さまざまなカテゴリ間でそれらを比較したい場合.これはあなたのカテゴリは、より多くの収入などに貢献する詳細な画像を与えるStackedColumnSeries これを達成するために、SFCartesianChartウィジェットのクラス.
スタック列図は、過去との収入と経費の詳細と一緒に過去を示しています.
注意:詳細については、このフラッタウェブを参照してくださいcolumn chart demo and user guide documentation .

経巻チャート

The waterfall chart 増加または減少によって変化することがある実体の定量的価値の段階的な変化を示します.これは、所得、費用、および利益/損失の詳細を視覚化するための最良のグラフの種類の一つです.肯定的な値と負の値としての費用として収入を指定することができます.また、肯定的な、負の、中間、およびすべてのデータポイントは、お互いに区別するために別の色を表示することができます.
次の例では、最後に純利益と一緒に様々なカテゴリで収益と経費の詳細をプロットしている.これはWaterfallSeries sfcartesianchartウィジェットからのクラス.
グラフは、所得、費用、および企業の純利益の詳細を示す滝.
次のコード例を参照してください.

SfCartesianChart(
  series: <WaterfallSeries<ChartData, String>>[
    WaterfallSeries<ChartData, String>(
      dataSource: chartData,
      xValueMapper: (ChartData data, _) => data.x,
      yValueMapper: (ChartData data, _) => data.y,
      intermediateSumPredicate: (ChartData data, _) => data.intermediateSumPredicate,
      totalSumPredicate: (ChartData data, _) => data.totalSumPredicate,
      color: Color.fromRGBO(0, 189, 174, 1),
      negativePointsColor: Color.fromRGBO(229, 101, 144, 1),
      intermediateSumColor: Color.fromRGBO(79, 129, 188, 1),
      totalSumColor: Color.fromRGBO(79, 129, 188, 1)
    )
  ]
)

あなたは前の年から値を比較したい場合は、滝のグラフで複数のシリーズを使用するか、それらの複数の滝のグラフをレンダリングすることができます.
次の例では、チャートを置き換えて、より良い理解のために垂直の滝図を作成しました.
これらの複数の滝のグラフは、数年間の企業の利益、費用、および利益の詳細を示しています.
注意:詳細については、このフラッタウェブを参照してくださいwaterfall chart demo and user guide documentation .

図3マイナス棒グラフ

The stacked bar chart プロットデータは、それぞれの上に水平棒を使用してポイントします.滝のチャートのように、マイナスの値を持つ正の値と費用で所得を視覚化することができます.これは、データの明確な比較を与える.
このグラフは、StackedBarSeries sfcartesianchartウィジェットからのクラス.次の例では、2つのスタッキングバーシリーズを使用しました.
正の値と負の値を持つ費用と所得を示す積み重ね棒グラフ.
次のコード例を参照してください.

SfCartesianChart(
  series: <CartesianSeries<ChartData, num>>[
    StackedBarSeries<ChartData, num>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    ),
    StackedBarSeries<ChartData, num>(
      dataSource: expenseData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Expense'
    )
  ]
)

注意:詳細については、このフラッタウェブを参照してくださいstacked bar chart demo and user guide documentation .

バブルチャート

The bubble chart 3次元データを視覚化するために使用されます.これは、入力の3つのパラメータ:x、y、バブルのサイズ値がかかります.これは、ユーザーに追加情報を伝える必要があるときに使用することができます.
次の例では、所得に貢献するさまざまなカテゴリをプロットします.X軸値は、昨年の上で増加したパーセンテージを表します、y軸値は昨年の上に増加した値を表します、そして、泡のサイズは正確な値を表します.
以下のチャートから、輸出の伸びは15 %であり、その値は$ 1.3 m増加し、現在の値は$ 12.2 mであると結論付けられる.使用するBubbleSeries これを達成するためにSFCartesianChartウィジェットからのクラス.
バブルチャートは、さまざまなカテゴリでの所得の成長を示す.
次のコード例を参照してください.

SfCartesianChart(
  series: <BubbleSeries<IncomeData, num>>[
    BubbleSeries<IncomeData, num>(
      dataSource: chartData,
      xValueMapper: (IncomeData data, _) => data.x, 
      yValueMapper: (IncomeData data, _) => data.y,
      sizeValueMapper: (IncomeData data, _) => data.size
    )
  ]
)

注意:詳細については、このフラッタウェブを参照してくださいbubble chart demo and user guide documentation .

図5積層面積図

The stacked area chart データポイントが互いに重なっているエリアチャートです.このカテゴリの値を合計すると、各カテゴリの全体的な貢献を見ることができますし、データの動向を示しています.
次の例では、いくつかの年にわたって様々な種類によって分割された所得データを視覚化しました.各カテゴリは、シリーズとして可視化されます.これはStackedAreaSeries デカルトチャート装置で.
様々なカテゴリからの収入を示すスタックエリアグラフ.
次のコード例を参照してください.

SfCartesianChart(
  series: <CartesianSeries<ChartData, DateTime>>[
    StackedAreaSeries<ChartData, DateTime>(
      dataSource: stocks, 
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Stocks',
    ),
    StackedAreaSeries<ChartData, DateTime>(
      dataSource: exports, 
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Exports',
    ),
   // Two more series.       
  ]
)

注意:詳細については、このフラッタウェブを参照してくださいstacked area chart demo and user guide documentation .

唐辛子とドーナツチャート

The pie and doughnut charts つの広く使用されるグラフの種類は、データを循環グラフで表示されます.彼らは様々なシナリオを可視化するために使用されますが、それらを選択するための1つの主な目的は、すべてのスライスの合計が100になる割合データを可視化することです.
本研究では,各カテゴリーの収入と支出に対する貢献度を視覚的に可視化する.すべてのカテゴリの合計は100 %になります.
次の例では、DoughnutSeries からのクラスSfCircularChart ウィジェット.

SfCircularChart(
  series: <DoughnutSeries<ChartData, String>>[
    DoughnutSeries<ChartData, String>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    )
  ]
)

同様に、あなたはpie series , 同様に.しかし、これらのグラフの種類を使用する1つの欠点は、別の収入と費用の詳細を視覚化するための2つのグラフを使用する必要があります.
様々なカテゴリからの所得率を示すドーナツチャート.
様々なカテゴリから経費率を示すドーナツチャート.
注意:詳細は下記のリンクを参照ください.

Pie chart SB sample and user guide documentation .

Doughnut chart SB sample and user guide documentation .

経巻7混合図

SFCarteSananChartウィジェットを使用すると、別の種類の一連の組み合わせをレンダリングすることができます.つまり、単一のグラフで2つ以上の種類の一連のレンダリングを行うことができます.
次の例では、line series 所得を視覚化するcolumn series 出費.このように、我々は混乱を避けて、データの読みやすさを強化することができます.
同じシリーズの費用を示している収入とコラムシリーズを示している線シリーズ.
次のコード例を参照してください.

SfCartesianChart(
  series: <CartesianSeries<ChartData, num>>[
    LineSeries<ChartData, num>(
      dataSource: incomeData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Income'
    ),
    ColumnSeries<ChartData, num>(
      dataSource: expenseData,
      xValueMapper: (ChartData data, _) => data.x, 
      yValueMapper: (ChartData data, _) => data.y,
      name: 'Expense'
    )
  ]
)

膨大な量のデータ(例えば、過去5年間の月間売上高)を比較したいなら、ベスト・オプションはライン・チャートを選ぶことです.つから、ユーザーはすぐに傾向を理解することができます.
次の例ではline series . つは、所得のためであり、他の費用の詳細です.
別のラインシリーズの毎月の収入と費用の過去3年間を示すラインチャート.
注意:詳細については、このフラッタウェブを参照してくださいcombination chart demo and user guide documentation .

結論

読書ありがとう!我々はこれらのヒントは、企業の収入と費用を視覚化するための適切なグラフの種類を選択するのに役立ちます願っています.他のプラットフォームのための当社のチャートコンポーネントをチェックアウトFlutter , を含む

Blazor

JavaScript

Xamarin

Angular

WinForms

WPF

UWP

閲覧我々documentation 他のフラッタのウィジェットについての詳細をご覧ください.また、この多くの例で我々のSyncFusionフラッターアプリを見ることができますGitHub repo . 我々のデモアプリをお見逃しなくGoogle Play とApp Store .
あなたがまだ顧客でないならば、あなたは我々の30日を試すことができますfree trial これらの機能をチェックアウトします.
また、あなたが私たちにフィードバックを送信したい場合、または任意の質問を提出したいと思います、このブログ記事のコメントセクションでそれらを投稿すること自由に感じてください.また、我々を介してお問い合わせすることができますsupport forum , feedback portal , or Direct-Trac support system . 我々は常にあなたを支援して満足している

関連ブログ