箱ひげ図

Box-and-Whisker charts are the statistical charts that display the distribution of numerical data through quartiles, means and outliers. As the name suggests, these values are represented using boxes and whiskers where boxes show the range of quartiles (lower quartile, upper quartile and median) while whiskers indicate the variability outside the upper and lower quartiles. Any point outside the whiskers is said to be an outlier. These charts are useful for comparing distributions between many groups or data sets. For instance, you can easily display the variation in monthly temperature of two cities.

In FlexChart, Box-and-Whisker can be implemented using the BoxWhisker class which represents a Box-and-Whisker series. FlexChart also provides options to specify whether to display outliers, inner points, mean line and mean marks through ShowOutliers, ShowInnerPoints, ShowMeanLine and ShowMeanMarks properties respectively.

To create a box-and-whisker chart through code, use the following code:

Razor	コードのコピー
@page "/FlexChart/BoxWhisker" @using C1.Chart; @using C1.Blazor.Chart; @using C1.Blazor.Input; <FlexChart Class="chart" BindingX="Quarter" ItemsSource="Data"> <SeriesCollection> <C1.Blazor.Chart.BoxWhisker Name="Experiment 1" Binding="Value1" ShowOutliers="true" /> <C1.Blazor.Chart.BoxWhisker Name="Experiment 2" Binding="Value2" ShowOutliers="true" /> </SeriesCollection> <AxisCollection> <Axis AxisType="AxisType.Y" Min="0" Max="1500" Position="Position.Left" AxisLine="false" MajorGrid="true" /> </AxisCollection> </FlexChart> @code { List<DataSource.QuarterData> Data { get; set; } protected override void OnInitialized() { Data = DataSource.GetData(); } public class DataSource { private static Random rnd = new Random(); public class QuarterData { public string Quarter { get; set; } public double Value1 { get; set; } public double Value2 { get; set; } } public static List<QuarterData> GetData(int rangeMin = 500, int rangeMax = 1000) { var names = "Q1,Q2,Q3,Q4".Split(','); var data = new List<QuarterData>(); for (int j = 0; j < 100; j++) { for (int i = 0; i < names.Length; i++) { var item = new QuarterData { Quarter = names[i], Value1 = rnd.Next(rangeMin, rangeMax), Value2 = rnd.Next(rangeMin, rangeMax) }; data.Add(item); } } // 異常値を追加します。 for (int j = 0; j < 5; j++) { for (int i = 0; i < names.Length; i++) { var item = new QuarterData { Quarter = names[i], Value1 = rnd.Next(0, 1500), Value2 = rnd.Next(0, 1500), }; data.Add(item); } } return data; } } }

Razor

コードのコピー

@page "/FlexChart/BoxWhisker"
@using C1.Chart;
@using C1.Blazor.Chart;
@using C1.Blazor.Input;

<FlexChart Class="chart" BindingX="Quarter" ItemsSource="Data">
    <SeriesCollection>
        <C1.Blazor.Chart.BoxWhisker Name="Experiment 1" Binding="Value1" ShowOutliers="true" />
        <C1.Blazor.Chart.BoxWhisker Name="Experiment 2" Binding="Value2" ShowOutliers="true" />
    </SeriesCollection>
    <AxisCollection>
        <Axis AxisType="AxisType.Y" Min="0" Max="1500" Position="Position.Left" AxisLine="false" MajorGrid="true" />
    </AxisCollection>
</FlexChart>

@code {
    List<DataSource.QuarterData> Data { get; set; }

    protected override void OnInitialized()
    {
        Data = DataSource.GetData();
    }

    public class DataSource
    {
        private static Random rnd = new Random();

        public class QuarterData
        {
            public string Quarter { get; set; }
            public double Value1 { get; set; }
            public double Value2 { get; set; }
        }

        public static List<QuarterData> GetData(int rangeMin = 500, int rangeMax = 1000)
        {
            var names = "Q1,Q2,Q3,Q4".Split(',');
            var data = new List<QuarterData>();
            for (int j = 0; j < 100; j++)
            {
                for (int i = 0; i < names.Length; i++)
                {
                    var item = new QuarterData
                    {
                        Quarter = names[i],
                        Value1 = rnd.Next(rangeMin, rangeMax),
                        Value2 = rnd.Next(rangeMin, rangeMax)
                    };
                    data.Add(item);
                }
            }

            // 異常値を追加します。
            for (int j = 0; j < 5; j++)
            {
                for (int i = 0; i < names.Length; i++)
                {
                    var item = new QuarterData
                    {
                        Quarter = names[i],
                        Value1 = rnd.Next(0, 1500),
                        Value2 = rnd.Next(0, 1500),
                    };

                    data.Add(item);
                }
            }

            return data;
        }
    }
}