誤差範囲

Error bars are the charts that indicate the estimated error or uncertainty in the measured data to give an idea about how precise that data is. They most often represent this through the standard deviation of data set. Error bars are, generally useful while plotting results of scientific studies, experiments, or any other measurements that show variation in data from original values. Deviation in sales forecast is one of the good examples that can be presented using these error bars.

In FlexChart, error bars can be shown along with various chart types such as line, area, column, scatter and, spline charts. Error bars can be implemented using the ErrorBar class which represents an error bar series. Apart from other series related properties, this class provides properties specific to error bar series such as the ErrorAmount property, which lets you specify the error amount of the series as a standard error amount, a percentage or a standard deviation. This property accepts the values from ErrorAmount enumeration.

To create a ErrorBar chart through code, use the following code:

Razor	コードのコピー
@page "/FlexChart/ErrorBar" @using C1.Chart; @using C1.Blazor.Chart; @using C1.Blazor.Input; <FlexChart Class="chart" ChartType="ChartType.Column" BindingX="Month" ItemsSource="Data"> <SeriesCollection> <C1.Blazor.Chart.ErrorBar Binding="Value" ErrorAmount="ErrorAmount.StandardError" ErrorValue="0.2" CustomPlusErrorValue="50" CustomMinusErrorValue="25" /> </SeriesCollection> </FlexChart> @code { List<DataSource.MonthData> Data { get; set; } protected override void OnInitialized() { Data = DataSource.GetData(); } public class DataSource { private static Random rnd = new Random(); public class MonthData { public string Month { get; set; } public double Value { get; set; } } public static List<MonthData> GetData(int rangeMin = 100, int rangeMax = 1000) { var months = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.AbbreviatedMonthNames; var data = new List<MonthData>(); for (int i = 0; i < 12; i++) { var country = new MonthData { Month = months[i], Value = rnd.Next(rangeMin, rangeMax) }; data.Add(country); } return data; } } }

Razor

コードのコピー

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

<FlexChart Class="chart" ChartType="ChartType.Column" 
           BindingX="Month" ItemsSource="Data">
    <SeriesCollection>
        <C1.Blazor.Chart.ErrorBar Binding="Value" ErrorAmount="ErrorAmount.StandardError" 
                                  ErrorValue="0.2" CustomPlusErrorValue="50" CustomMinusErrorValue="25" />
    </SeriesCollection>
</FlexChart>
@code {
    List<DataSource.MonthData> Data { get; set; }

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

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

        public class MonthData
        {
            public string Month { get; set; }
            public double Value { get; set; }
        }

        public static List<MonthData> GetData(int rangeMin = 100, int rangeMax = 1000)
        {
            var months = System.Globalization.CultureInfo.CurrentUICulture.DateTimeFormat.AbbreviatedMonthNames;
            var data = new List<MonthData>();
            for (int i = 0; i < 12; i++)
            {
                var country = new MonthData
                {
                    Month = months[i],
                    Value = rnd.Next(rangeMin, rangeMax)
                };
                data.Add(country);
            }
            return data;
        }
    }
}