FlexChart for UWP
ウォータフォール
FlexChart > FlexChart の操作 > FlexChart の要素 > FlexChart の系列 > ウォータフォール

ウォータフォール系列を使用すると、一連の正の値と負の値の累積的な影響を把握することができます。一連の正の値と負の値が初期値にどのように影響していくかを理解できると有益です。ウォータフォール系列は、正の値と負の値を容易に区別できるように縦棒を色分けして描画します。一般に、最初の値と最後の値は合計を表す縦棒で表され、中間の値は浮いた状態の縦棒で表されます。ウォータフォール系列は、カテゴリテキストの列があり、正の値と負の値が混在している場合に使用することをお勧めします。主に、在庫分析や売上分析などの定量分析がこれに該当します。これらのエンティティの定量値が増減する場合に、チャートにはその段階的な変化が示されます。

FlexChart の次の機能を実装およびカスタマイズして、ウォータフォール系列によるデータ視覚化をさらに強化できます。

次の図に、一連の正の値と負の値の累積的な影響を表したウォータフォール系列を示します。

FlexChart でウォータフォール系列を使用するには、まず Waterfall クラスのインスタンスを作成します。このクラスは、Series クラスを継承します。次に、C1FlexChart クラスで提供されている Series プロパティを使用して、作成したインスタンスを FlexChart Series コレクションに追加します。

次のコードスニペットは、FlexChart でウォータフォール系列を使用する際に、さまざまなプロパティを設定する方法を示します。このコードスニペットでは、まず DataCreator クラスを作成してチャートのデータを生成し、次に系列をデータソースに連結しています。

Class DataCreator
    Public Shared Function CreateData() As List(Of DataItem)
        Dim data = New List(Of DataItem)()
        data.Add(New DataItem("製品の収入", 420))
        data.Add(New DataItem("サービスの収入", -180))
        data.Add(New DataItem("固定費", 130))
        data.Add(New DataItem("変動費用", -20))
        Return data
    End Function
End Class

Public Class DataItem
    Public Sub New(costs__1 As String, amount__2 As Integer)
        Costs = costs__1
        Amount = amount__2
    End Sub

    Public Property Costs() As String
        Get
            Return m_Costs
        End Get
        Set
            m_Costs = Value
        End Set
    End Property
    Private m_Costs As String
    Public Property Amount() As Integer
        Get
            Return m_Amount
        End Get
        Set
            m_Amount = Value
        End Set
    End Property
    Private m_Amount As Integer
End Class

using System.Collections.Generic;

namespace Waterfall
{
    class DataCreator
    {
        public static List<DataItem> CreateData()
        {
            var data = new List<DataItem>();
            data.Add(new DataItem("製品の収入", 420));
            data.Add(new DataItem("サービスの収入", -180));
            data.Add(new DataItem("固定費", 130));
            data.Add(new DataItem("変動費用", -20));
            return data;
        }
    }

    public class DataItem
    {
        public DataItem(string costs, int amount)
        {
            Costs = costs;
            Amount = amount;
        }

        public string Costs { get; set; }
        public int Amount { get; set; }
    }
}

 

次に、FlexChart をデータソースに連結するためのコードスニペットを示します。

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Waterfall"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Chart="using:C1.Xaml.Chart" 
    xmlns:Foundation="using:Windows.Foundation"
    x:Class="Waterfall.MainPage"
    DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
    mc:Ignorable="d" Height="528.558" Width="712.292">
    <Grid Margin="-140,0,-223.667,-0.333">
        <Chart:C1FlexChart x:Name="flexChart"
                        BindingX="Costs" 
                        ItemsSource="{Binding DataContext.Data}"  Margin="10,127,10,10">
            <Chart:C1FlexChart.Series>
                <Chart:Waterfall Binding="Amount" ConnectorLines="True"
                 ShowTotal="True" ShowIntermediateTotal="True">
                    <Chart:Waterfall.StartStyle>
                        <Chart:ChartStyle Fill="#7dc7ed" />
                    </Chart:Waterfall.StartStyle>
                    <Chart:Waterfall.FallingStyle>
                        <Chart:ChartStyle Fill="#dd2714" />
                    </Chart:Waterfall.FallingStyle>
                    <Chart:Waterfall.RisingStyle>
                        <Chart:ChartStyle Fill="#0f9d58" Stroke="#0f9d58" />
                    </Chart:Waterfall.RisingStyle>
                    <Chart:Waterfall.IntermediateTotalStyle>
                        <Chart:ChartStyle Fill="#7dc7ed" />
                    </Chart:Waterfall.IntermediateTotalStyle>
                    <Chart:Waterfall.TotalStyle>
                        <Chart:ChartStyle Fill="#7dc7ed" />
                    </Chart:Waterfall.TotalStyle>
                    <Chart:Waterfall.ConnectorLineStyle>
                        <Chart:ChartStyle Stroke="#333" StrokeDashArray="5,5"/>
                    </Chart:Waterfall.ConnectorLineStyle>
                </Chart:Waterfall>
            </Chart:C1FlexChart.Series>
            <Chart:C1FlexChart.AxisY>
                <Chart:Axis Min="0" Max="500"></Chart:Axis>
            </Chart:C1FlexChart.AxisY>
        </Chart:C1FlexChart>
    </Grid>
</Page>
C#
コードのコピー 
// FlexChartの系列コレクションをクリアします。
flexChart.Series.Clear();

// ウォータフォール系列のインスタンスを作成します。
C1.Xaml.Chart.Waterfall waterFall = new C1.Xaml.Chart.Waterfall();

// Seriesコレクションにインスタンスを追加します。
flexChart.Series.Add(waterFall);

// FlexChartのY値を含むフィールドをバインドします。
waterFall.Binding = "Amount";

// FlexChartのX値を含むフィールドをバインドします。
flexChart.BindingX = "Costs";

// ConnectorLinesプロパティを設定します。
waterFall.ConnectorLines = true;

// ShowTotalプロパティを設定します。
waterFall.ShowTotal = true;
               
VB
コードのコピー 
' FlexChartの系列コレクションをクリアします。
flexChart.Series.Clear()

' ウォータフォール系列のインスタンスを作成します。
Dim waterFall As New C1.Xaml.Chart.Waterfall()

' Seriesコレクションにインスタンスを追加します。
flexChart.Series.Add(waterFall)

' FlexChartのY値を含むフィールドをバインドします。
waterFall.Binding = "Amount"

' FlexChartのX値を含むフィールドをバインドします。
flexChart.BindingX = "Costs"

' ConnectorLinesプロパティを設定します。
waterFall.ConnectorLines = True

' ShowTotalプロパティを設定します。
waterFall.ShowTotal = True

 

 

Copyright © MESCIUS, Inc. All rights reserved.