FlexChart for WPF
ヒストグラム
FlexChart > FlexChart の理解 > FlexChart タイプ > ヒストグラム

ヒストグラムは、定義されているクラスの間隔(ビン)に対するデータの度数分布をプロットします。これらのビンは、生データ値を重複のない連続した間隔に分割することで作成されます。特定のビンに入る値の数に基づき、連続的な X 軸に沿った長方形の柱として度数がプロットされます。

The following representations can created with the help of a histogram.

The following images show a histogram and a cumulative histogram created using FlexChart.

Histogram chart Histogram chart
Histogram Cumulative Histogram

ヒストグラムを作成するには、 Histogram 系列を追加し、 ChartType プロパティを Histogram に設定する必要があります。

関連するデータを指定すると、チャートは、データをグループ化する間隔を自動的に計算します。ただし、必要に応じて、 BinWidth プロパティを設定することで、この間隔の幅を指定することもできます。

次のコードスニペットに示すように、FlexChart でデータの度数分布を生成し、ヒストグラムにプロットし、関連するデータを提供します。

<Chart:C1FlexChart x:Name="flexChart"
                   ChartType="Histogram"
                   ItemsSource="{Binding DataContext.Data}"
                   Binding="Y"
                   BindingX="X">
    <Chart:C1FlexChart.AxisX>
        <Chart:Axis Format="0.00"></Chart:Axis>
    </Chart:C1FlexChart.AxisX>
    <Chart:Histogram x:Name="histogramSeries" SeriesName="度数"/>            
</Chart:C1FlexChart>

Frequency Polygon

A frequency polygon shows a frequency distribution representing the overall pattern in the data. It is a closed two-dimensional figure of straight line segments -created by joining the mid points of the top of the bars of a histogram.

Use the following steps to create a frequency polygon using histogram chart.

  1. Set the AppearanceType property to FrequencyPolygon. This property accepts value from the HistogramAppearance enumeration.
  2. Set the style for frequency polygon using the FrequencyPolygonStyle property.

Moreover, you can also create a cumulative frequency polygon by setting the CumulativeMode property to true.

The following images show a frequency polygon and a cumulative frequency polygon created using FlexChart.

Histogram chart Histogram chart
Frequency Polygon Cumulative Frequency Polygon

Use the following code snippet to create a frequency polygon.

In XAML
コードのコピー
<c1:Histogram x:Name="histogramSeries" SeriesName="Frequency" CumulativeMode="True" 
                  AppearanceType="FrequencyPolygon" />
<c1:Histogram.FrequencyPolygonStyle>
        <c1:ChartStyle Stroke="Red" StrokeThickness="2"/>
</c1:Histogram.FrequencyPolygonStyle>
In Code
コードのコピー
histogramSeries.AppearanceType = HistogramAppearance.FrequencyPolygon;
histogramSeries.FrequencyPolygonStyle = new ChartStyle()
{Stroke = new SolidColorBrush(Color.FromRgb(255, 0, 0))};
// 累積頻度ポリゴンを作成する
histogramSeries.CumulativeMode = true;

Gaussian Curve

Gaussian curve is a bell shaped curve, also known as normal curve, which represents the probability distribution of a continuous random variable. It represents a unimodal distribution as it only has one peak. Moreover, it shows a symmetric distribution as fifty percent of the data set lies on the left side of the mean and fifty percent of the data lies on the right side of the mean.

Use the following steps to create a Gaussian curve using histogram chart.

  1. Set the AppearanceType property to Histogram. This property accepts value from the HistogramAppearance enumeration.
  2. Set the NormalCurve.Visible property to true to create a Gaussian curve.
  3. Set the style for Gaussian curve using the NormalCurve.LineStyle property.

Following image illustrates a Gaussian curve created using FlexChart, which depicts probability distribution of scores obtained by students of a university in half yearly examinations.

Use the following code snippet to create a Gaussian curve.

In XAML
コードのコピー
<c1:Histogram x:Name="histogramSeries" SeriesName="Frequency"
                          AppearanceType="Histogram" />
<c1:Histogram.NormalCurve>
        <c1:NormalCurve>
        <c1:NormalCurve.LineStyle>
            <c1:ChartStyle Stroke="Green" StrokeThickness="2"/>
            </c1:NormalCurve.LineStyle>
    </c1:NormalCurve>
</c1:Histogram.NormalCurve>
In code
コードのコピー
histogramSeries.AppearanceType = HistogramAppearance.Histogram;
histogramSeries.NormalCurve.Visible = true;
histogramSeries.NormalCurve.LineStyle = new ChartStyle() {Stroke = new SolidColorBrush(Color.FromRgb(0, 128, 0))};

先頭に戻る