Blazor 차트 오버레이
Blazor IgbDataChart IgbValueOverlay를 사용하여 정의한 단일 숫자 값에 가로 또는 세로 선을 배치할 수 있도록 합니다. 이를 통해 특정 시리즈의 평균 또는 중앙값과 같은 데이터를 시각화하는 데 도움이 될 수 있습니다.
Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。
Blazor Value Overlay Example
다음 예에서는 몇 개의 수평 값 오버레이가 표시된 기둥 차트 보여줍니다.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbColumnSeriesModule),
typeof(IgbValueOverlayModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical">
@if (Data != null)
{
<IgbDataChart Height="100%" Width="100%" IsHorizontalZoomEnabled="true" IsVerticalZoomEnabled="true">
<IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Label" />
<IgbNumericYAxis Name="yAxis" MinimumValue="0" MaximumValue="10" />
<IgbColumnSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="Value" />
<IgbValueOverlay AxisName="yAxis" Value="2.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="3.6" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="5.8" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="1.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="8.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="7.0" Thickness="5" />
<IgbValueOverlay AxisName="yAxis" Value="5.0" Thickness="5" />
</IgbDataChart>
}
</div>
</div>
@code {
private List<OverlayDataItem> Data;
protected override void OnInitialized()
{
var data = new List<OverlayDataItem>() {
new OverlayDataItem() { Label = "1", Value = 1.0 },
new OverlayDataItem() { Label = "2", Value = 2.0 },
new OverlayDataItem() { Label = "3", Value = 6.0 },
new OverlayDataItem() { Label = "4", Value = 8.0 },
new OverlayDataItem() { Label = "5", Value = 2.0 },
new OverlayDataItem() { Label = "6", Value = 6.0 },
new OverlayDataItem() { Label = "7", Value = 4.0 },
new OverlayDataItem() { Label = "8", Value = 2.0 },
new OverlayDataItem() { Label = "9", Value = 1.0 }
};
this.Data = data;
}
public class OverlayDataItem {
public string Label { get; set; }
public double Value { get; set; }
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Blazor Value Overlay Properties
데이터 바인딩에 DataSource 사용하는 다른 계열 유형과 달리 값 오버레이는 ValueMemberPath 속성을 사용하여 단일 숫자 값을 바인딩합니다. 또한 값 오버레이를 사용하려면 사용할 단일 Axis 정의해야 합니다. X축을 사용하면 값 오버레이가 수직선이 되고, Y축을 사용하면 수평선이 됩니다.
숫자 X 또는 Y 축을 사용하는 경우 ValueMemberPath 속성은 값 오버레이를 그릴 축의 실제 숫자 값을 반영해야 합니다. 범주 X 또는 Y 축을 사용하는 경우 ValueMemberPath 값 오버레이를 표시할 범주의 인덱스를 반영해야 합니다.
숫자 각도 축과 함께 값 오버레이를 사용하면 차트 중앙에서 선으로 나타나고 숫자 반경 축을 사용하면 원으로 나타납니다.
IgbValueOverlay 모양 속성은 Series에서 상속되므로 예를 들어 Brush 및 Thickness 사용할 수 있으며 다른 유형의 시리즈와 동일한 방식으로 작동합니다.
IgbValueOverlay에 축 주석을 표시하여 소유 축에 오버레이 값을 표시할 수도 있습니다. 이를 표시하려면 IsAxisAnnotationEnabled 속성을 true로 설정하면 됩니다.
Blazor Value Layer
Blazor 차팅 구성 요소는 최소값, 최대값, 평균값 등 데이터의 다양한 초점을 표시하기 위해 값 선을 사용하는 기능도 제공합니다.
적용 IgbValueLayer에서 IgbCategoryChart 그리고 IgbFinancialChart 구성 요소는 다음을 설정하여 수행됩니다. ValueLines 차트의 속성. 이 속성은 ValueLayerValueMode 열거. 여러 값 레이어를 추가하여 동일한 차트에 여러 값 레이어를 혼합하고 일치시킬 수 있습니다. ValueLayerValueMode에 대한 열거 ValueLines 차트 수집.
IgbDataChart 에서는 차트의 Series 컬렉션에 IgbValueLayer 추가한 다음 ValueMode 속성을 ValueLayerValueMode 열거 중 하나로 설정하여 이 작업을 수행합니다. 각 열거형과 그 의미는 다음과 같습니다.
Auto:ValueLayerValueMode열거형의 기본 값 모드입니다.Average: 잠재적으로 여러 값 라인을 적용하여 차트에 표시된 각 계열의 평균 값을 표시합니다.GlobalAverage: 단일 값 선을 적용하여 차트에 있는 모든 계열 값의 평균을 표시합니다.GlobalMaximum: 단일 값 라인을 적용하여 차트에 있는 모든 계열 값의 절대 최대값을 표시합니다.GlobalMinimum: 단일 값 선을 적용하여 차트에 있는 모든 계열 값의 절대 최소값을 표시합니다.Maximum: 잠재적으로 여러 값 라인을 적용하여 차트에 표시된 각 계열의 최대값을 표시합니다.Minimum: 잠재적으로 여러 값 라인을 적용하여 차트에 표시된 각 계열의 최소값을 표시합니다.
IgbValueLayer 요소를 사용할 때 특정 계열이 고려되지 않도록 하려면 레이어에서 TargetSeries 속성을 설정하면 됩니다. 이렇게 하면 레이어가 정의한 계열을 대상으로 지정하게 됩니다. 단일 IgbDataChart 내에 원하는 만큼 많은 IgbValueLayer 요소를 가질 수 있습니다.
다음 샘플은 IgbCategoryChart에서 다양한 ValueLines의 사용법을 보여줍니다.
using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
public string Year { get; set; }
public double Europe { get; set; }
public double China { get; set; }
public double America { get; set; }
}
public class CountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
public CountryRenewableElectricity()
{
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2009",
Europe = 34,
China = 21,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2010",
Europe = 43,
China = 26,
America = 24
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2011",
Europe = 66,
China = 29,
America = 28
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2012",
Europe = 69,
China = 32,
America = 26
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2013",
Europe = 58,
China = 47,
America = 38
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2014",
Europe = 40,
China = 46,
America = 31
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2015",
Europe = 78,
China = 50,
America = 19
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2016",
Europe = 13,
China = 90,
America = 52
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2017",
Europe = 78,
China = 132,
America = 50
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2018",
Europe = 40,
China = 134,
America = 34
});
this.Add(new CountryRenewableElectricityItem()
{
Year = @"2019",
Europe = 80,
China = 96,
America = 38
});
}
}csusing System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System
@using System.Linq
<div class="container vertical">
<div class="options vertical">
<IgbPropertyEditorPanel
Name="PropertyEditor"
@ref="propertyEditor"
DescriptionType="CategoryChart"
IsHorizontal="true"
IsWrappingEnabled="true">
<IgbPropertyEditorPropertyDescription
PropertyPath="ValueListHandler"
Name="ValueListEditor"
@ref="valueListEditor"
Label="Value List"
ShouldOverrideDefaultEditor="true"
ValueType="PropertyEditorValueType.EnumValue"
DropDownValues="@(new string[] { "Auto", "Average", "GlobalAverage", "GlobalMaximum", "GlobalMinimum", "Maximum", "Minimum" })"
DropDownNames="@(new string[] { "Auto", "Average", "GlobalAverage", "GlobalMaximum", "GlobalMinimum", "Maximum", "Minimum" })"
PrimitiveValue="@("Auto")"
Changed="EditorChangeUpdateValueLines">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="legend-title">
Renewable Electricity Generated
</div>
<div class="legend">
<IgbLegend
Name="legend"
@ref="legend"
Orientation="LegendOrientation.Horizontal">
</IgbLegend>
</div>
<div class="container vertical fill">
<IgbCategoryChart
Name="chart"
@ref="chart"
DataSource="CountryRenewableElectricity"
IncludedProperties="@(new string[] { "Year", "America", "Europe" })"
ChartType="CategoryChartType.Column"
IsHorizontalZoomEnabled="false"
IsVerticalZoomEnabled="false"
CrosshairsDisplayMode="CrosshairsDisplayMode.None"
IsTransitionInEnabled="false"
YAxisMinimumValue="0"
YAxisMaximumValue="100">
</IgbCategoryChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var propertyEditor = this.propertyEditor;
var valueListEditor = this.valueListEditor;
var chart = this.chart;
this.BindElements = () => {
propertyEditor.Target = this.chart;
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbPropertyEditorPanel propertyEditor;
private IgbPropertyEditorPropertyDescription valueListEditor;
private IgbCategoryChart chart;
public void EditorChangeUpdateValueLines(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
{
//var item = this.PropertyEditor.Properties.Where((p) => p.PropertyPath == "MarkerType").First();
//var value = (string)item.PrimitiveValue;
var chart = this.chart;
var valueLineType = (ValueLayerValueMode)Enum.Parse(typeof(ValueLayerValueMode), args.NewValue.ToString());
chart.ValueLines.Clear();
chart.ValueLines.Add(valueLineType);
}
private CountryRenewableElectricity _countryRenewableElectricity = null;
public CountryRenewableElectricity CountryRenewableElectricity
{
get
{
if (_countryRenewableElectricity == null)
{
_countryRenewableElectricity = new CountryRenewableElectricity();
}
return _countryRenewableElectricity;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Blazor Financial Overlays
Blazor 주식 차트 에서는 내장된 재무 오버레이와 지표를 표시할 수도 있습니다.
Chart Overlay Text (Beta)
Blazor IgbValueOverlay 및 IgbValueLayer 모든 데이터 주석 레이어는 XamDataChart 구성 요소의 플롯 영역 내에서 사용자 정의 오버레이 텍스트를 렌더링할 수 있습니다. 이 오버레이 텍스트를 사용하여 레이어와 관련하여 x축의 중요한 이벤트(예: 회사 분기 보고서) 또는 y축의 중요한 값에 주석을 달 수 있습니다.
예를 들어 다음을 사용할 수 있습니다. DataAnnotationSliceLayer, IgbValueOverlay 그리고 IgbValueLayer을 클릭하여 오버레이 텍스트를 표시합니다.
using System;
using System.Collections.Generic;
public class AnnotationSliceMultiOverlayDataItem
{
public double Value { get; set; }
}
public class AnnotationSliceMultiOverlayData
: List<AnnotationSliceMultiOverlayDataItem>
{
public AnnotationSliceMultiOverlayData()
{
this.Add(new AnnotationSliceMultiOverlayDataItem()
{
Value = 50
});
}
}csusing System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules
namespace Infragistics.Samples
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbAnnotationLayerProxyModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbDataAnnotationSliceLayerModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbAnnotationLayerProxyModule),
typeof(IgbValueOverlayModule)
);
await builder.Build().RunAsync();
}
}
}csusing System;
using System.Collections.Generic;
public class StockTeslaItem
{
public string Date { get; set; }
public double Open { get; set; }
public double High { get; set; }
public double Low { get; set; }
public double Close { get; set; }
public double Volume { get; set; }
public double Change { get; set; }
public double Index { get; set; }
}
public class StockTesla
: List<StockTeslaItem>
{
public StockTesla()
{
this.Add(new StockTeslaItem()
{
Date = @"2019-01-10",
Open = 20.4,
High = 23,
Low = 19.8,
Close = 23,
Volume = 779333701,
Change = 12.7,
Index = 0
});
this.Add(new StockTeslaItem()
{
Date = @"2019-01-22",
Open = 22.8,
High = 23.5,
Low = 19.7,
Close = 19.9,
Volume = 911781100,
Change = -12.6,
Index = 1
});
this.Add(new StockTeslaItem()
{
Date = @"2019-01-31",
Open = 19.5,
High = 20.8,
Low = 18.6,
Close = 20.5,
Volume = 926375717,
Change = 5,
Index = 2
});
this.Add(new StockTeslaItem()
{
Date = @"2019-02-11",
Open = 20.4,
High = 21.6,
Low = 19.9,
Close = 20.9,
Volume = 687520471,
Change = 2.4,
Index = 3
});
this.Add(new StockTeslaItem()
{
Date = @"2019-02-21",
Open = 21.1,
High = 21.2,
Low = 19.4,
Close = 19.4,
Volume = 597552272,
Change = -7.9,
Index = 4
});
this.Add(new StockTeslaItem()
{
Date = @"2019-03-04",
Open = 19.6,
High = 21.3,
Low = 18.9,
Close = 19,
Volume = 1218669201,
Change = -3.1,
Index = 5
});
this.Add(new StockTeslaItem()
{
Date = @"2019-03-13",
Open = 18.8,
High = 19.5,
Low = 18,
Close = 19.3,
Volume = 1034156904,
Change = 2.5,
Index = 6
});
this.Add(new StockTeslaItem()
{
Date = @"2019-03-22",
Open = 19.5,
High = 19.7,
Low = 17.6,
Close = 17.6,
Volume = 980694095,
Change = -9.5,
Index = 7
});
this.Add(new StockTeslaItem()
{
Date = @"2019-04-02",
Open = 17.3,
High = 19.3,
Low = 17,
Close = 19.1,
Volume = 788473494,
Change = 10.1,
Index = 8
});
this.Add(new StockTeslaItem()
{
Date = @"2019-04-11",
Open = 19.2,
High = 19.7,
Low = 17.4,
Close = 17.9,
Volume = 1165555442,
Change = -6.6,
Index = 9
});
this.Add(new StockTeslaItem()
{
Date = @"2019-04-23",
Open = 18,
High = 18.3,
Low = 17,
Close = 17.6,
Volume = 870373200,
Change = -2.3,
Index = 10
});
this.Add(new StockTeslaItem()
{
Date = @"2019-05-02",
Open = 17.6,
High = 17.7,
Low = 15.4,
Close = 16.3,
Volume = 1629432326,
Change = -7.5,
Index = 11
});
this.Add(new StockTeslaItem()
{
Date = @"2019-05-13",
Open = 16.3,
High = 17.2,
Low = 15,
Close = 15.1,
Volume = 1131045605,
Change = -6.9,
Index = 12
});
this.Add(new StockTeslaItem()
{
Date = @"2019-05-22",
Open = 15.3,
High = 15.6,
Low = 12.8,
Close = 12.8,
Volume = 1455503588,
Change = -15.9,
Index = 13
});
this.Add(new StockTeslaItem()
{
Date = @"2019-06-03",
Open = 13,
High = 13.3,
Low = 11.8,
Close = 11.9,
Volume = 1415442268,
Change = -7.9,
Index = 14
});
this.Add(new StockTeslaItem()
{
Date = @"2019-06-12",
Open = 12.1,
High = 14.9,
Low = 12,
Close = 14,
Volume = 1515000443,
Change = 15.6,
Index = 15
});
this.Add(new StockTeslaItem()
{
Date = @"2019-06-21",
Open = 14,
High = 15.6,
Low = 13.8,
Close = 14.8,
Volume = 1009123371,
Change = 5.5,
Index = 16
});
this.Add(new StockTeslaItem()
{
Date = @"2019-07-02",
Open = 14.9,
High = 15.5,
Low = 14.5,
Close = 15,
Volume = 766921642,
Change = 0.6,
Index = 17
});
this.Add(new StockTeslaItem()
{
Date = @"2019-07-12",
Open = 16,
High = 16.4,
Low = 15.2,
Close = 16.3,
Volume = 887983836,
Change = 2.4,
Index = 18
});
this.Add(new StockTeslaItem()
{
Date = @"2019-07-23",
Open = 16.5,
High = 17.5,
Low = 16.3,
Close = 17.3,
Volume = 788941000,
Change = 4.9,
Index = 19
});
this.Add(new StockTeslaItem()
{
Date = @"2019-08-01",
Open = 17.3,
High = 17.7,
Low = 14.8,
Close = 15.6,
Volume = 1175082297,
Change = -9.8,
Index = 20
});
this.Add(new StockTeslaItem()
{
Date = @"2019-08-12",
Open = 15.4,
High = 16,
Low = 15,
Close = 15.3,
Volume = 560129569,
Change = -1,
Index = 21
});
this.Add(new StockTeslaItem()
{
Date = @"2019-08-21",
Open = 15.3,
High = 15.7,
Low = 14.1,
Close = 14.7,
Volume = 677293701,
Change = -3.5,
Index = 22
});
this.Add(new StockTeslaItem()
{
Date = @"2019-08-30",
Open = 14.9,
High = 15.5,
Low = 14.1,
Close = 15,
Volume = 650239370,
Change = 1.3,
Index = 23
});
this.Add(new StockTeslaItem()
{
Date = @"2019-09-11",
Open = 14.9,
High = 16.5,
Low = 14.6,
Close = 16.5,
Volume = 636766167,
Change = 10.3,
Index = 24
});
this.Add(new StockTeslaItem()
{
Date = @"2019-09-20",
Open = 16.5,
High = 16.9,
Low = 15.9,
Close = 16,
Volume = 572802643,
Change = -2.9,
Index = 25
});
this.Add(new StockTeslaItem()
{
Date = @"2019-10-01",
Open = 16,
High = 16.6,
Low = 14.6,
Close = 16.3,
Volume = 931821239,
Change = 2,
Index = 26
});
this.Add(new StockTeslaItem()
{
Date = @"2019-10-10",
Open = 16.2,
High = 16.6,
Low = 15,
Close = 16.3,
Volume = 891798049,
Change = 0.6,
Index = 27
});
this.Add(new StockTeslaItem()
{
Date = @"2019-10-21",
Open = 16.5,
High = 17.7,
Low = 16.5,
Close = 16.9,
Volume = 713093463,
Change = 2.6,
Index = 28
});
this.Add(new StockTeslaItem()
{
Date = @"2019-10-30",
Open = 17,
High = 22.7,
Low = 16.7,
Close = 21,
Volume = 1752943598,
Change = 23.9,
Index = 29
});
this.Add(new StockTeslaItem()
{
Date = @"2019-11-08",
Open = 20.9,
High = 22.8,
Low = 20.6,
Close = 22.5,
Volume = 834957256,
Change = 7.7,
Index = 30
});
this.Add(new StockTeslaItem()
{
Date = @"2019-11-19",
Open = 22.9,
High = 24,
Low = 22.8,
Close = 24,
Volume = 738746390,
Change = 4.5,
Index = 31
});
this.Add(new StockTeslaItem()
{
Date = @"2019-11-29",
Open = 24,
High = 24.1,
Low = 21.8,
Close = 22,
Volume = 870685288,
Change = -8.4,
Index = 32
});
this.Add(new StockTeslaItem()
{
Date = @"2019-12-10",
Open = 22,
High = 23.4,
Low = 21.8,
Close = 23.3,
Volume = 712016613,
Change = 5.9,
Index = 33
});
this.Add(new StockTeslaItem()
{
Date = @"2019-12-19",
Open = 23.5,
High = 27.1,
Low = 23.4,
Close = 26.9,
Volume = 1203765433,
Change = 14.8,
Index = 34
});
this.Add(new StockTeslaItem()
{
Date = @"2019-12-31",
Open = 27.4,
High = 29,
Low = 26.7,
Close = 27.9,
Volume = 1195073357,
Change = 2,
Index = 35
});
this.Add(new StockTeslaItem()
{
Date = @"2020-01-10",
Open = 28.3,
High = 33.3,
Low = 28.1,
Close = 31.9,
Volume = 1925386078,
Change = 12.6,
Index = 36
});
this.Add(new StockTeslaItem()
{
Date = @"2020-01-22",
Open = 32.9,
High = 39.6,
Low = 32.8,
Close = 38,
Volume = 2364043518,
Change = 15.4,
Index = 37
});
this.Add(new StockTeslaItem()
{
Date = @"2020-01-31",
Open = 37.6,
High = 43.5,
Low = 36,
Close = 43.4,
Volume = 1835141382,
Change = 15.3,
Index = 38
});
this.Add(new StockTeslaItem()
{
Date = @"2020-02-11",
Open = 44.9,
High = 64.6,
Low = 44.9,
Close = 51.6,
Volume = 3748903126,
Change = 14.9,
Index = 39
});
this.Add(new StockTeslaItem()
{
Date = @"2020-02-21",
Open = 51.9,
High = 63,
Low = 49,
Close = 60.1,
Volume = 1921517039,
Change = 15.8,
Index = 40
});
this.Add(new StockTeslaItem()
{
Date = @"2020-03-03",
Open = 55.9,
High = 57.6,
Low = 40.8,
Close = 49.7,
Volume = 2121850940,
Change = -11.1,
Index = 41
});
this.Add(new StockTeslaItem()
{
Date = @"2020-03-12",
Open = 50.9,
High = 51.1,
Low = 36.4,
Close = 37.4,
Volume = 1553329923,
Change = -26.6,
Index = 42
});
this.Add(new StockTeslaItem()
{
Date = @"2020-03-23",
Open = 39.7,
High = 40.5,
Low = 23.4,
Close = 29,
Volume = 2487688157,
Change = -27,
Index = 43
});
this.Add(new StockTeslaItem()
{
Date = @"2020-04-01",
Open = 31.8,
High = 37.3,
Low = 31.6,
Close = 32.1,
Volume = 1785601357,
Change = 0.9,
Index = 44
});
this.Add(new StockTeslaItem()
{
Date = @"2020-04-13",
Open = 32.1,
High = 43.5,
Low = 29.8,
Close = 43.4,
Volume = 1860352620,
Change = 35.3,
Index = 45
});
this.Add(new StockTeslaItem()
{
Date = @"2020-04-22",
Open = 46.6,
High = 51.7,
Low = 44.9,
Close = 48.8,
Volume = 2056797321,
Change = 4.7,
Index = 46
});
this.Add(new StockTeslaItem()
{
Date = @"2020-05-01",
Open = 48.5,
High = 58,
Low = 45.5,
Close = 46.8,
Volume = 2093959203,
Change = -3.6,
Index = 47
});
this.Add(new StockTeslaItem()
{
Date = @"2020-05-12",
Open = 46.7,
High = 56.2,
Low = 46.5,
Close = 54,
Volume = 1611543246,
Change = 15.5,
Index = 48
});
this.Add(new StockTeslaItem()
{
Date = @"2020-05-21",
Open = 54.7,
High = 55.6,
Low = 50.9,
Close = 55.2,
Volume = 1262468113,
Change = 0.8,
Index = 49
});
this.Add(new StockTeslaItem()
{
Date = @"2020-06-02",
Open = 54.8,
High = 60.6,
Low = 52.3,
Close = 58.8,
Volume = 1160487993,
Change = 7.2,
Index = 50
});
this.Add(new StockTeslaItem()
{
Date = @"2020-06-11",
Open = 59.2,
High = 68.5,
Low = 57.2,
Close = 64.9,
Volume = 1270377400,
Change = 9.5,
Index = 51
});
this.Add(new StockTeslaItem()
{
Date = @"2020-06-22",
Open = 65.3,
High = 67.9,
Low = 60.6,
Close = 66.3,
Volume = 1217946366,
Change = 1.5,
Index = 52
});
this.Add(new StockTeslaItem()
{
Date = @"2020-07-01",
Open = 66.6,
High = 75.7,
Low = 62.5,
Close = 74.6,
Volume = 1120591270,
Change = 12.1,
Index = 53
});
this.Add(new StockTeslaItem()
{
Date = @"2020-07-13",
Open = 81.4,
High = 119.7,
Low = 79,
Close = 99.8,
Volume = 2244920779,
Change = 22.6,
Index = 54
});
this.Add(new StockTeslaItem()
{
Date = @"2020-07-22",
Open = 103.7,
High = 111.7,
Low = 95.4,
Close = 106.2,
Volume = 1662846099,
Change = 2.3,
Index = 55
});
this.Add(new StockTeslaItem()
{
Date = @"2020-07-31",
Open = 111.9,
High = 112.6,
Low = 91.1,
Close = 95.4,
Volume = 1573159944,
Change = -14.8,
Index = 56
});
this.Add(new StockTeslaItem()
{
Date = @"2020-08-11",
Open = 96.6,
High = 101.8,
Low = 91,
Close = 91.6,
Volume = 798587331,
Change = -5.2,
Index = 57
});
this.Add(new StockTeslaItem()
{
Date = @"2020-08-20",
Open = 98,
High = 134.8,
Low = 95.7,
Close = 133.5,
Volume = 1866534416,
Change = 36.2,
Index = 58
});
this.Add(new StockTeslaItem()
{
Date = @"2020-08-31",
Open = 136.3,
High = 166.7,
Low = 128.5,
Close = 166.1,
Volume = 2008507459,
Change = 21.9,
Index = 59
});
this.Add(new StockTeslaItem()
{
Date = @"2020-09-10",
Open = 167.4,
High = 167.5,
Low = 110,
Close = 123.8,
Volume = 1992227059,
Change = -26,
Index = 60
});
this.Add(new StockTeslaItem()
{
Date = @"2020-09-21",
Open = 127.3,
High = 154,
Low = 120.2,
Close = 149.8,
Volume = 1758737696,
Change = 17.7,
Index = 61
});
this.Add(new StockTeslaItem()
{
Date = @"2020-09-30",
Open = 143.2,
High = 145.9,
Low = 117.1,
Close = 143,
Volume = 1459893236,
Change = -0.1,
Index = 62
});
this.Add(new StockTeslaItem()
{
Date = @"2020-10-09",
Open = 146.9,
High = 149.6,
Low = 135.4,
Close = 144.7,
Volume = 985545158,
Change = -1.5,
Index = 63
});
this.Add(new StockTeslaItem()
{
Date = @"2020-10-20",
Open = 147.3,
High = 155.3,
Low = 139.7,
Close = 140.6,
Volume = 773077727,
Change = -4.5,
Index = 64
});
this.Add(new StockTeslaItem()
{
Date = @"2020-10-29",
Open = 140.9,
High = 148.4,
Low = 135.3,
Close = 136.9,
Volume = 615339122,
Change = -2.8,
Index = 65
});
this.Add(new StockTeslaItem()
{
Date = @"2020-11-09",
Open = 135.6,
High = 150.8,
Low = 126.4,
Close = 140.4,
Volume = 669171368,
Change = 3.5,
Index = 66
});
this.Add(new StockTeslaItem()
{
Date = @"2020-11-18",
Open = 140,
High = 165.3,
Low = 132,
Close = 162.2,
Volume = 760451265,
Change = 15.8,
Index = 67
});
this.Add(new StockTeslaItem()
{
Date = @"2020-11-30",
Open = 164,
High = 202.6,
Low = 162.5,
Close = 189.2,
Volume = 1046371155,
Change = 15.4,
Index = 68
});
this.Add(new StockTeslaItem()
{
Date = @"2020-12-09",
Open = 199.2,
High = 218.1,
Low = 180.4,
Close = 201.5,
Volume = 1055933265,
Change = 1.2,
Index = 69
});
this.Add(new StockTeslaItem()
{
Date = @"2020-12-18",
Open = 191.5,
High = 231.7,
Low = 188.8,
Close = 231.7,
Volume = 1593943601,
Change = 21,
Index = 70
});
this.Add(new StockTeslaItem()
{
Date = @"2020-12-30",
Open = 222.1,
High = 232.2,
Low = 204.7,
Close = 231.6,
Volume = 791942570,
Change = 4.3,
Index = 71
});
this.Add(new StockTeslaItem()
{
Date = @"2021-01-11",
Open = 233.3,
High = 294.8,
Low = 230.4,
Close = 270.4,
Volume = 1084025779,
Change = 15.9,
Index = 72
});
this.Add(new StockTeslaItem()
{
Date = @"2021-01-21",
Open = 277,
High = 289.3,
Low = 273,
Close = 281.7,
Volume = 663774487,
Change = 1.7,
Index = 73
});
this.Add(new StockTeslaItem()
{
Date = @"2021-02-01",
Open = 278.1,
High = 300.1,
Low = 260,
Close = 279.9,
Volume = 595397009,
Change = 0.7,
Index = 74
});
this.Add(new StockTeslaItem()
{
Date = @"2021-02-10",
Open = 281.6,
High = 293.5,
Low = 266.7,
Close = 268.3,
Volume = 445813486,
Change = -4.7,
Index = 75
});
this.Add(new StockTeslaItem()
{
Date = @"2021-02-22",
Open = 270.8,
High = 276.6,
Low = 236.7,
Close = 238.2,
Volume = 496372009,
Change = -12.1,
Index = 76
});
this.Add(new StockTeslaItem()
{
Date = @"2021-03-03",
Open = 220.7,
High = 290.7,
Low = 206.3,
Close = 217.7,
Volume = 793689739,
Change = -1.3,
Index = 77
});
this.Add(new StockTeslaItem()
{
Date = @"2021-03-12",
Open = 218.6,
High = 291.3,
Low = 179.8,
Close = 231.2,
Volume = 1215209162,
Change = 5.8,
Index = 78
});
this.Add(new StockTeslaItem()
{
Date = @"2021-03-23",
Open = 231.4,
High = 237.7,
Low = 208.2,
Close = 220.7,
Volume = 744776145,
Change = -4.6,
Index = 79
});
this.Add(new StockTeslaItem()
{
Date = @"2021-04-01",
Open = 222.6,
High = 230.8,
Low = 197,
Close = 220.6,
Volume = 730733684,
Change = -0.9,
Index = 80
});
this.Add(new StockTeslaItem()
{
Date = @"2021-04-13",
Open = 235.9,
High = 254.3,
Low = 222.6,
Close = 254.1,
Volume = 646721884,
Change = 7.7,
Index = 81
});
this.Add(new StockTeslaItem()
{
Date = @"2021-04-22",
Open = 256.9,
High = 260.3,
Low = 230.6,
Close = 239.9,
Volume = 740840774,
Change = -6.6,
Index = 82
});
this.Add(new StockTeslaItem()
{
Date = @"2021-05-03",
Open = 239.9,
High = 249.8,
Low = 222,
Close = 228.3,
Volume = 623423313,
Change = -4.8,
Index = 83
});
this.Add(new StockTeslaItem()
{
Date = @"2021-05-12",
Open = 226.3,
High = 230,
Low = 195.6,
Close = 196.6,
Volume = 643844974,
Change = -13.1,
Index = 84
});
this.Add(new StockTeslaItem()
{
Date = @"2021-05-21",
Open = 200.5,
High = 202.2,
Low = 182.3,
Close = 193.6,
Volume = 729192883,
Change = -3.4,
Index = 85
});
this.Add(new StockTeslaItem()
{
Date = @"2021-06-02",
Open = 193.9,
High = 211.9,
Low = 191.2,
Close = 201.7,
Volume = 545095944,
Change = 4,
Index = 86
});
this.Add(new StockTeslaItem()
{
Date = @"2021-06-11",
Open = 200.6,
High = 207.7,
Low = 190.4,
Close = 203.3,
Volume = 478366128,
Change = 1.3,
Index = 87
});
this.Add(new StockTeslaItem()
{
Date = @"2021-06-22",
Open = 204.1,
High = 210.5,
Low = 197.8,
Close = 207.9,
Volume = 454698495,
Change = 1.9,
Index = 88
});
this.Add(new StockTeslaItem()
{
Date = @"2021-07-01",
Open = 210.7,
High = 232.5,
Low = 210,
Close = 226,
Volume = 558441596,
Change = 7.3,
Index = 89
});
this.Add(new StockTeslaItem()
{
Date = @"2021-07-13",
Open = 226.3,
High = 233.3,
Low = 206.8,
Close = 222.8,
Volume = 470942387,
Change = -1.5,
Index = 90
});
this.Add(new StockTeslaItem()
{
Date = @"2021-07-22",
Open = 223.6,
High = 226.2,
Low = 207.1,
Close = 216.4,
Volume = 372195097,
Change = -3.2,
Index = 91
});
this.Add(new StockTeslaItem()
{
Date = @"2021-08-02",
Open = 215.5,
High = 242.3,
Low = 209.1,
Close = 236.6,
Volume = 547284685,
Change = 9.8,
Index = 92
});
this.Add(new StockTeslaItem()
{
Date = @"2021-08-11",
Open = 239.7,
High = 241.6,
Low = 232.5,
Close = 235.9,
Volume = 315341455,
Change = -1.6,
Index = 93
});
this.Add(new StockTeslaItem()
{
Date = @"2021-08-20",
Open = 235.4,
High = 243.3,
Low = 216.3,
Close = 226.8,
Volume = 392227478,
Change = -3.7,
Index = 94
});
this.Add(new StockTeslaItem()
{
Date = @"2021-08-31",
Open = 228.5,
High = 246.8,
Low = 226.9,
Close = 245.2,
Volume = 337503634,
Change = 7.3,
Index = 95
});
this.Add(new StockTeslaItem()
{
Date = @"2021-09-10",
Open = 244.7,
High = 254.8,
Low = 241.4,
Close = 245.4,
Volume = 328100734,
Change = 0.3,
Index = 96
});
this.Add(new StockTeslaItem()
{
Date = @"2021-09-21",
Open = 246.7,
High = 253.7,
Low = 236.3,
Close = 246.5,
Volume = 420153012,
Change = -0.1,
Index = 97
});
this.Add(new StockTeslaItem()
{
Date = @"2021-09-30",
Open = 247.8,
High = 266.3,
Low = 246.4,
Close = 258.5,
Volume = 422393262,
Change = 4.3,
Index = 98
});
this.Add(new StockTeslaItem()
{
Date = @"2021-10-11",
Open = 259.5,
High = 269,
Low = 254.5,
Close = 264,
Volume = 392144589,
Change = 1.7,
Index = 99
});
this.Add(new StockTeslaItem()
{
Date = @"2021-10-20",
Open = 267,
High = 292.6,
Low = 265.5,
Close = 288.6,
Volume = 368796877,
Change = 8.1,
Index = 100
});
this.Add(new StockTeslaItem()
{
Date = @"2021-10-29",
Open = 285.3,
High = 371.7,
Low = 285.2,
Close = 371.3,
Volume = 825862313,
Change = 30.1,
Index = 101
});
this.Add(new StockTeslaItem()
{
Date = @"2021-11-09",
Open = 381.7,
High = 414.5,
Low = 337.2,
Close = 341.2,
Volume = 818978542,
Change = -10.6,
Index = 102
});
this.Add(new StockTeslaItem()
{
Date = @"2021-11-18",
Open = 336.8,
High = 373.2,
Low = 326.2,
Close = 365.5,
Volume = 613304311,
Change = 8.5,
Index = 103
});
this.Add(new StockTeslaItem()
{
Date = @"2021-11-30",
Open = 366.3,
High = 400.6,
Low = 354,
Close = 381.6,
Volume = 515052382,
Change = 4.2,
Index = 104
});
this.Add(new StockTeslaItem()
{
Date = @"2021-12-09",
Open = 386.9,
High = 390.9,
Low = 316.8,
Close = 334.6,
Volume = 473333567,
Change = -13.5,
Index = 105
});
this.Add(new StockTeslaItem()
{
Date = @"2021-12-20",
Open = 336.2,
High = 340.3,
Low = 297.8,
Close = 300,
Volume = 524367113,
Change = -10.8,
Index = 106
});
this.Add(new StockTeslaItem()
{
Date = @"2021-12-30",
Open = 305.6,
High = 373,
Low = 295.4,
Close = 356.8,
Volume = 492530059,
Change = 16.7,
Index = 107
});
this.Add(new StockTeslaItem()
{
Date = @"2022-01-10",
Open = 357.8,
High = 402.7,
Low = 326.7,
Close = 352.7,
Volume = 592103938,
Change = -1.4,
Index = 108
});
this.Add(new StockTeslaItem()
{
Date = @"2022-01-20",
Open = 351.2,
High = 371.9,
Low = 331.3,
Close = 332.1,
Volume = 532857144,
Change = -5.4,
Index = 109
});
this.Add(new StockTeslaItem()
{
Date = @"2022-01-31",
Open = 332.1,
High = 334.8,
Low = 264,
Close = 312.2,
Volume = 833589022,
Change = -6,
Index = 110
});
this.Add(new StockTeslaItem()
{
Date = @"2022-02-09",
Open = 311.7,
High = 315.9,
Low = 293.5,
Close = 310.7,
Volume = 456395505,
Change = -0.3,
Index = 111
});
this.Add(new StockTeslaItem()
{
Date = @"2022-02-18",
Open = 302.8,
High = 314.6,
Low = 279.2,
Close = 285.7,
Volume = 446153356,
Change = -5.7,
Index = 112
});
this.Add(new StockTeslaItem()
{
Date = @"2022-03-02",
Open = 278,
High = 296.6,
Low = 233.3,
Close = 293.3,
Volume = 638352514,
Change = 5.5,
Index = 113
});
this.Add(new StockTeslaItem()
{
Date = @"2022-03-11",
Open = 292.9,
High = 295.5,
Low = 260.7,
Close = 265.1,
Volume = 466566467,
Change = -9.5,
Index = 114
});
this.Add(new StockTeslaItem()
{
Date = @"2022-03-22",
Open = 260.2,
High = 332.6,
Low = 252,
Close = 331.3,
Volume = 576869668,
Change = 27.3,
Index = 115
});
this.Add(new StockTeslaItem()
{
Date = @"2022-03-31",
Open = 326.6,
High = 371.6,
Low = 325.5,
Close = 359.2,
Volume = 536607263,
Change = 10,
Index = 116
});
this.Add(new StockTeslaItem()
{
Date = @"2022-04-11",
Open = 360.4,
High = 384.3,
Low = 324.9,
Close = 325.3,
Volume = 499682510,
Change = -9.7,
Index = 117
});
this.Add(new StockTeslaItem()
{
Date = @"2022-04-21",
Open = 332.5,
High = 364.1,
Low = 324.4,
Close = 336.3,
Volume = 457210487,
Change = 1.1,
Index = 118
});
this.Add(new StockTeslaItem()
{
Date = @"2022-05-02",
Open = 338.3,
High = 345,
Low = 273.9,
Close = 301,
Volume = 639990965,
Change = -11,
Index = 119
});
this.Add(new StockTeslaItem()
{
Date = @"2022-05-11",
Open = 301.1,
High = 318.5,
Low = 242.4,
Close = 244.7,
Volume = 583211967,
Change = -18.7,
Index = 120
});
this.Add(new StockTeslaItem()
{
Date = @"2022-05-20",
Open = 233.7,
High = 262.4,
Low = 211,
Close = 221.3,
Volume = 721880082,
Change = -5.3,
Index = 121
});
this.Add(new StockTeslaItem()
{
Date = @"2022-06-01",
Open = 218.3,
High = 259.6,
Low = 206.9,
Close = 246.8,
Volume = 644596235,
Change = 13,
Index = 122
});
this.Add(new StockTeslaItem()
{
Date = @"2022-06-10",
Open = 244.2,
High = 264.2,
Low = 227.9,
Close = 232.2,
Volume = 633672873,
Change = -4.9,
Index = 123
});
this.Add(new StockTeslaItem()
{
Date = @"2022-06-22",
Open = 223.2,
High = 246.8,
Low = 208.7,
Close = 236.1,
Volume = 744240764,
Change = 5.8,
Index = 124
});
this.Add(new StockTeslaItem()
{
Date = @"2022-07-01",
Open = 237.9,
High = 252.1,
Low = 218.9,
Close = 227.3,
Volume = 631776422,
Change = -4.5,
Index = 125
});
this.Add(new StockTeslaItem()
{
Date = @"2022-07-13",
Open = 223,
High = 255,
Low = 216.2,
Close = 237,
Volume = 625812242,
Change = 6.3,
Index = 126
});
this.Add(new StockTeslaItem()
{
Date = @"2022-07-22",
Open = 234.9,
High = 280.8,
Low = 229.3,
Close = 272.2,
Volume = 646037224,
Change = 15.9,
Index = 127
});
this.Add(new StockTeslaItem()
{
Date = @"2022-08-02",
Open = 272.2,
High = 311.9,
Low = 256.3,
Close = 300.6,
Volume = 611660612,
Change = 10.4,
Index = 128
});
this.Add(new StockTeslaItem()
{
Date = @"2022-08-11",
Open = 305,
High = 313.6,
Low = 279.4,
Close = 286.6,
Volume = 616204291,
Change = -6,
Index = 129
});
this.Add(new StockTeslaItem()
{
Date = @"2022-08-22",
Open = 289.4,
High = 314.7,
Low = 285,
Close = 289.9,
Volume = 490658060,
Change = 0.2,
Index = 130
});
this.Add(new StockTeslaItem()
{
Date = @"2022-08-31",
Open = 291.5,
High = 303.6,
Low = 271.8,
Close = 275.6,
Volume = 376152572,
Change = -5.4,
Index = 131
});
this.Add(new StockTeslaItem()
{
Date = @"2022-09-12",
Open = 272.6,
High = 305.5,
Low = 265.7,
Close = 304.4,
Volume = 367924580,
Change = 11.7,
Index = 132
});
this.Add(new StockTeslaItem()
{
Date = @"2022-09-21",
Open = 292.9,
High = 313.8,
Low = 290.4,
Close = 300.8,
Volume = 477171180,
Change = 2.7,
Index = 133
});
this.Add(new StockTeslaItem()
{
Date = @"2022-09-30",
Open = 299.9,
High = 301.3,
Low = 262.5,
Close = 265.2,
Volume = 454307920,
Change = -11.5,
Index = 134
});
this.Add(new StockTeslaItem()
{
Date = @"2022-10-11",
Open = 254.5,
High = 257.5,
Low = 215,
Close = 216.5,
Volume = 593078170,
Change = -14.9,
Index = 135
});
this.Add(new StockTeslaItem()
{
Date = @"2022-10-20",
Open = 215.3,
High = 229.8,
Low = 202,
Close = 207.3,
Volume = 592158560,
Change = -3.7,
Index = 136
});
this.Add(new StockTeslaItem()
{
Date = @"2022-10-31",
Open = 206.4,
High = 233.8,
Low = 198.6,
Close = 227.5,
Volume = 550341050,
Change = 10.2,
Index = 137
});
this.Add(new StockTeslaItem()
{
Date = @"2022-11-09",
Open = 234,
High = 237.4,
Low = 177.1,
Close = 177.6,
Volume = 630702790,
Change = -24.1,
Index = 138
});
this.Add(new StockTeslaItem()
{
Date = @"2022-11-18",
Open = 189.9,
High = 200.8,
Low = 176.6,
Close = 180.2,
Volume = 637579480,
Change = -5.1,
Index = 139
});
this.Add(new StockTeslaItem()
{
Date = @"2022-11-30",
Open = 175.8,
High = 194.8,
Low = 166.2,
Close = 194.7,
Volume = 617126140,
Change = 10.7,
Index = 140
});
this.Add(new StockTeslaItem()
{
Date = @"2022-12-09",
Open = 197.1,
High = 198.9,
Low = 169.1,
Close = 179,
Volume = 625675690,
Change = -9.1,
Index = 141
});
this.Add(new StockTeslaItem()
{
Date = @"2022-12-20",
Open = 176.1,
High = 177.4,
Low = 137.7,
Close = 137.8,
Volume = 986660100,
Change = -21.7,
Index = 142
});
this.Add(new StockTeslaItem()
{
Date = @"2022-12-30",
Open = 139.3,
High = 141.3,
Low = 108.2,
Close = 123.2,
Volume = 1331911900,
Change = -11.6,
Index = 143
});
this.Add(new StockTeslaItem()
{
Date = @"2023-01-11",
Open = 118.5,
High = 126,
Low = 101.8,
Close = 123.2,
Volume = 1332426500,
Change = 4,
Index = 144
});
this.Add(new StockTeslaItem()
{
Date = @"2023-01-23",
Open = 122.6,
High = 145.4,
Low = 115.6,
Close = 143.8,
Volume = 1244541500,
Change = 17.3,
Index = 145
});
this.Add(new StockTeslaItem()
{
Date = @"2023-02-01",
Open = 143,
High = 183.8,
Low = 138.1,
Close = 181.4,
Volume = 1534337700,
Change = 26.9,
Index = 146
});
this.Add(new StockTeslaItem()
{
Date = @"2023-02-10",
Open = 187.3,
High = 214,
Low = 182.6,
Close = 196.9,
Volume = 1423167800,
Change = 5.1,
Index = 147
});
this.Add(new StockTeslaItem()
{
Date = @"2023-02-22",
Open = 194.4,
High = 217.6,
Low = 187.6,
Close = 200.9,
Volume = 1386211900,
Change = 3.3,
Index = 148
});
this.Add(new StockTeslaItem()
{
Date = @"2023-03-03",
Open = 203.9,
High = 211.2,
Low = 186,
Close = 197.8,
Volume = 1095786600,
Change = -3,
Index = 149
});
this.Add(new StockTeslaItem()
{
Date = @"2023-03-14",
Open = 198.5,
High = 198.6,
Low = 163.9,
Close = 183.3,
Volume = 1101144600,
Change = -7.7,
Index = 150
});
this.Add(new StockTeslaItem()
{
Date = @"2023-03-23",
Open = 180.8,
High = 200.7,
Low = 176,
Close = 192.2,
Volume = 978213300,
Change = 6.3,
Index = 151
});
this.Add(new StockTeslaItem()
{
Date = @"2023-04-03",
Open = 191.6,
High = 207.8,
Low = 185.4,
Close = 194.8,
Volume = 909718040,
Change = 1.6,
Index = 152
});
this.Add(new StockTeslaItem()
{
Date = @"2023-04-13",
Open = 197.3,
High = 198.7,
Low = 176.1,
Close = 185.9,
Volume = 905319000,
Change = -5.8,
Index = 153
});
this.Add(new StockTeslaItem()
{
Date = @"2023-04-24",
Open = 184,
High = 189.7,
Low = 158.6,
Close = 162.6,
Volume = 905416980,
Change = -11.6,
Index = 154
});
this.Add(new StockTeslaItem()
{
Date = @"2023-05-03",
Open = 159.8,
High = 165.5,
Low = 152.4,
Close = 160.6,
Volume = 881897100,
Change = 0.5,
Index = 155
});
this.Add(new StockTeslaItem()
{
Date = @"2023-05-12",
Open = 162.7,
High = 177.4,
Low = 159.6,
Close = 168,
Volume = 785510430,
Change = 3.2,
Index = 156
});
this.Add(new StockTeslaItem()
{
Date = @"2023-05-23",
Open = 167.7,
High = 193,
Low = 164.4,
Close = 185.8,
Volume = 864025390,
Change = 10.8,
Index = 157
});
this.Add(new StockTeslaItem()
{
Date = @"2023-06-02",
Open = 182.2,
High = 217.2,
Low = 178.2,
Close = 214,
Volume = 988496020,
Change = 17.4,
Index = 158
});
this.Add(new StockTeslaItem()
{
Date = @"2023-06-13",
Open = 217.8,
High = 259.7,
Low = 212.5,
Close = 258.7,
Volume = 1161622400,
Change = 18.8,
Index = 159
});
this.Add(new StockTeslaItem()
{
Date = @"2023-06-23",
Open = 260.2,
High = 277,
Low = 247.3,
Close = 256.6,
Volume = 1220407300,
Change = -1.4,
Index = 160
});
this.Add(new StockTeslaItem()
{
Date = @"2023-07-05",
Open = 250.1,
High = 284.2,
Low = 240.7,
Close = 282.5,
Volume = 999163700,
Change = 13,
Index = 161
});
this.Add(new StockTeslaItem()
{
Date = @"2023-07-14",
Open = 278.1,
High = 285.3,
Low = 265.1,
Close = 281.4,
Volume = 774400400,
Change = 1.2,
Index = 162
});
this.Add(new StockTeslaItem()
{
Date = @"2023-07-25",
Open = 286.6,
High = 299.3,
Low = 254.1,
Close = 265.3,
Volume = 973076400,
Change = -7.4,
Index = 163
});
this.Add(new StockTeslaItem()
{
Date = @"2023-08-03",
Open = 263.2,
High = 269.1,
Low = 250.5,
Close = 259.3,
Volume = 678809820,
Change = -1.5,
Index = 164
});
this.Add(new StockTeslaItem()
{
Date = @"2023-08-14",
Open = 261,
High = 264.8,
Low = 233.8,
Close = 239.8,
Volume = 716008860,
Change = -8.1,
Index = 165
});
this.Add(new StockTeslaItem()
{
Date = @"2023-08-23",
Open = 238.7,
High = 240.8,
Low = 212.4,
Close = 236.9,
Volume = 825055300,
Change = -0.8,
Index = 166
});
this.Add(new StockTeslaItem()
{
Date = @"2023-09-01",
Open = 238.7,
High = 261.2,
Low = 228.2,
Close = 245,
Volume = 811502630,
Change = 2.7,
Index = 167
});
this.Add(new StockTeslaItem()
{
Date = @"2023-09-13",
Open = 245,
High = 278.4,
Low = 243.3,
Close = 271.3,
Volume = 902643400,
Change = 10.7,
Index = 168
});
this.Add(new StockTeslaItem()
{
Date = @"2023-09-22",
Open = 271.3,
High = 279,
Low = 244.5,
Close = 244.9,
Volume = 816639600,
Change = -9.7,
Index = 169
});
this.Add(new StockTeslaItem()
{
Date = @"2023-10-03",
Open = 243.4,
High = 254.8,
Low = 234.6,
Close = 246.5,
Volume = 814604700,
Change = 1.3,
Index = 170
});
this.Add(new StockTeslaItem()
{
Date = @"2023-10-12",
Open = 248.1,
High = 268.9,
Low = 247.6,
Close = 258.9,
Volume = 806250900,
Change = 4.3,
Index = 171
});
this.Add(new StockTeslaItem()
{
Date = @"2023-10-23",
Open = 258.9,
High = 259.6,
Low = 202.5,
Close = 212.1,
Volume = 869390890,
Change = -18.1,
Index = 172
});
this.Add(new StockTeslaItem()
{
Date = @"2023-11-01",
Open = 216.5,
High = 222,
Low = 194.1,
Close = 205.7,
Volume = 811468170,
Change = -5,
Index = 173
});
this.Add(new StockTeslaItem()
{
Date = @"2023-11-10",
Open = 213,
High = 226.4,
Low = 205.7,
Close = 214.6,
Volume = 859763700,
Change = 0.8,
Index = 174
});
this.Add(new StockTeslaItem()
{
Date = @"2023-11-21",
Open = 215.6,
High = 246.7,
Low = 211.6,
Close = 241.2,
Volume = 959006600,
Change = 11.9,
Index = 175
});
this.Add(new StockTeslaItem()
{
Date = @"2023-12-01",
Open = 242,
High = 252.8,
Low = 231.4,
Close = 238.8,
Volume = 832910200,
Change = -1.3,
Index = 176
});
this.Add(new StockTeslaItem()
{
Date = @"2023-12-12",
Open = 235.8,
High = 246.7,
Low = 233.3,
Close = 237,
Volume = 772018400,
Change = 0.5,
Index = 177
});
this.Add(new StockTeslaItem()
{
Date = @"2023-12-21",
Open = 234.2,
High = 259.8,
Low = 228.2,
Close = 254.5,
Volume = 900893400,
Change = 8.7,
Index = 178
});
this.Add(new StockTeslaItem()
{
Date = @"2024-01-03",
Open = 256.8,
High = 265.1,
Low = 236.3,
Close = 238.4,
Volume = 727005170,
Change = -7.1,
Index = 179
});
this.Add(new StockTeslaItem()
{
Date = @"2024-01-12",
Open = 239.2,
High = 242.7,
Low = 217.2,
Close = 218.9,
Volume = 697536380,
Change = -8.5,
Index = 180
});
this.Add(new StockTeslaItem()
{
Date = @"2024-01-24",
Open = 215.1,
High = 223.5,
Low = 206.3,
Close = 207.8,
Volume = 777303400,
Change = -3.4,
Index = 181
});
this.Add(new StockTeslaItem()
{
Date = @"2024-02-02",
Open = 189.7,
High = 196.4,
Low = 180.1,
Close = 187.9,
Volume = 846092780,
Change = -0.9,
Index = 182
});
this.Add(new StockTeslaItem()
{
Date = @"2024-02-13",
Open = 184.3,
High = 194.7,
Low = 175,
Close = 184,
Volume = 718274070,
Change = -0.1,
Index = 183
});
this.Add(new StockTeslaItem()
{
Date = @"2024-02-23",
Open = 185.3,
High = 203.2,
Low = 183.4,
Close = 192,
Volume = 693352670,
Change = 3.6,
Index = 184
});
this.Add(new StockTeslaItem()
{
Date = @"2024-03-05",
Open = 192.3,
High = 205.6,
Low = 177.6,
Close = 180.7,
Volume = 742344460,
Change = -6,
Index = 185
});
this.Add(new StockTeslaItem()
{
Date = @"2024-03-14",
Open = 180,
High = 182.9,
Low = 160.5,
Close = 162.5,
Volume = 701227950,
Change = -9.7,
Index = 186
});
this.Add(new StockTeslaItem()
{
Date = @"2024-03-25",
Open = 163.2,
High = 178.2,
Low = 160.8,
Close = 172.6,
Volume = 589466660,
Change = 5.8,
Index = 187
});
this.Add(new StockTeslaItem()
{
Date = @"2024-04-04",
Open = 178.6,
High = 184.2,
Low = 163.3,
Close = 171.1,
Volume = 676969950,
Change = -4.2,
Index = 188
});
this.Add(new StockTeslaItem()
{
Date = @"2024-04-15",
Open = 169.1,
High = 179.2,
Low = 160.5,
Close = 161.5,
Volume = 694829970,
Change = -4.5,
Index = 189
});
this.Add(new StockTeslaItem()
{
Date = @"2024-04-24",
Open = 156.7,
High = 168,
Low = 138.8,
Close = 162.1,
Volume = 775433710,
Change = 3.4,
Index = 190
});
this.Add(new StockTeslaItem()
{
Date = @"2024-05-03",
Open = 159,
High = 198.9,
Low = 158.4,
Close = 181.2,
Volume = 864614000,
Change = 14,
Index = 191
});
this.Add(new StockTeslaItem()
{
Date = @"2024-05-14",
Open = 183.8,
High = 187.6,
Low = 167.8,
Close = 177.6,
Volume = 531409380,
Change = -3.4,
Index = 192
});
this.Add(new StockTeslaItem()
{
Date = @"2024-05-23",
Open = 179.9,
High = 186.9,
Low = 171.4,
Close = 173.7,
Volume = 554203970,
Change = -3.4,
Index = 193
});
this.Add(new StockTeslaItem()
{
Date = @"2024-06-04",
Open = 174.8,
High = 182.7,
Low = 173.2,
Close = 174.8,
Volume = 453828370,
Change = 0,
Index = 194
});
this.Add(new StockTeslaItem()
{
Date = @"2024-06-13",
Open = 175.4,
High = 191.1,
Low = 167.4,
Close = 182.5,
Volume = 509090870,
Change = 4.1,
Index = 195
});
this.Add(new StockTeslaItem()
{
Date = @"2024-06-25",
Open = 185.8,
High = 188.8,
Low = 176.9,
Close = 187.4,
Volume = 505399520,
Change = 0.8,
Index = 196
});
this.Add(new StockTeslaItem()
{
Date = @"2024-07-05",
Open = 186.5,
High = 252.4,
Low = 186.4,
Close = 251.5,
Volume = 925723660,
Change = 34.8,
Index = 197
});
this.Add(new StockTeslaItem()
{
Date = @"2024-07-16",
Open = 247.7,
High = 271,
Low = 233.1,
Close = 256.6,
Volume = 1097390000,
Change = 3.6,
Index = 198
});
this.Add(new StockTeslaItem()
{
Date = @"2024-07-25",
Open = 252.7,
High = 258.5,
Low = 214.7,
Close = 220.2,
Volume = 795590700,
Change = -12.9,
Index = 199
});
this.Add(new StockTeslaItem()
{
Date = @"2024-08-05",
Open = 221.2,
High = 234.7,
Low = 182,
Close = 198.9,
Volume = 658914080,
Change = -10.1,
Index = 200
});
this.Add(new StockTeslaItem()
{
Date = @"2024-08-14",
Open = 200.8,
High = 208.5,
Low = 191.5,
Close = 201.4,
Volume = 479168160,
Change = 0.3,
Index = 201
});
this.Add(new StockTeslaItem()
{
Date = @"2024-08-23",
Open = 205,
High = 228.2,
Low = 204.8,
Close = 220.3,
Volume = 560235700,
Change = 7.5,
Index = 202
});
this.Add(new StockTeslaItem()
{
Date = @"2024-09-04",
Open = 218.8,
High = 222.2,
Low = 202.6,
Close = 219.4,
Volume = 469284350,
Change = 0.3,
Index = 203
});
this.Add(new StockTeslaItem()
{
Date = @"2024-09-13",
Open = 223.5,
High = 235,
Low = 210.5,
Close = 230.3,
Volume = 592950440,
Change = 3,
Index = 204
});
this.Add(new StockTeslaItem()
{
Date = @"2024-09-24",
Open = 229.3,
High = 257.2,
Low = 223.5,
Close = 254.3,
Volume = 577086700,
Change = 10.9,
Index = 205
});
this.Add(new StockTeslaItem()
{
Date = @"2024-10-03",
Open = 252.5,
High = 264.9,
Low = 237.8,
Close = 240.7,
Volume = 546148740,
Change = -4.7,
Index = 206
});
this.Add(new StockTeslaItem()
{
Date = @"2024-10-14",
Open = 246.7,
High = 251,
Low = 213.7,
Close = 219.2,
Volume = 589440130,
Change = -11.2,
Index = 207
});
this.Add(new StockTeslaItem()
{
Date = @"2024-10-23",
Open = 220,
High = 224.3,
Low = 212.1,
Close = 213.6,
Volume = 384561880,
Change = -2.9,
Index = 208
});
this.Add(new StockTeslaItem()
{
Date = @"2024-11-01",
Open = 244.7,
High = 273.5,
Low = 242.6,
Close = 249,
Volume = 732392780,
Change = 1.8,
Index = 209
});
this.Add(new StockTeslaItem()
{
Date = @"2024-11-12",
Open = 244.6,
High = 358.6,
Low = 238.9,
Close = 328.5,
Volume = 991653160,
Change = 34.3,
Index = 210
});
this.Add(new StockTeslaItem()
{
Date = @"2024-11-21",
Open = 335.8,
High = 348.5,
Low = 309.2,
Close = 339.6,
Volume = 700324320,
Change = 1.1,
Index = 211
});
this.Add(new StockTeslaItem()
{
Date = @"2024-12-03",
Open = 341.1,
High = 361.9,
Low = 326.6,
Close = 351.4,
Volume = 478645220,
Change = 3,
Index = 212
});
this.Add(new StockTeslaItem()
{
Date = @"2024-12-12",
Open = 353,
High = 429.3,
Low = 348.6,
Close = 418.1,
Volume = 599082110,
Change = 18.4,
Index = 213
});
this.Add(new StockTeslaItem()
{
Date = @"2024-12-23",
Open = 420,
High = 481.5,
Low = 415.4,
Close = 430.6,
Volume = 807128120,
Change = 2.5,
Index = 214
});
this.Add(new StockTeslaItem()
{
Date = @"2025-01-03",
Open = 435.9,
High = 465.3,
Low = 373,
Close = 410.4,
Volume = 565769940,
Change = -5.8,
Index = 215
});
this.Add(new StockTeslaItem()
{
Date = @"2025-01-15",
Open = 423.2,
High = 429.8,
Low = 377.3,
Close = 428.2,
Volume = 530063170,
Change = 1.2,
Index = 216
});
this.Add(new StockTeslaItem()
{
Date = @"2025-01-27",
Open = 423.5,
High = 439.7,
Low = 389,
Close = 397.2,
Volume = 476854060,
Change = -6.2,
Index = 217
});
this.Add(new StockTeslaItem()
{
Date = @"2025-02-05",
Open = 396.9,
High = 420,
Low = 374.4,
Close = 378.2,
Volume = 507024510,
Change = -4.7,
Index = 218
});
this.Add(new StockTeslaItem()
{
Date = @"2025-02-14",
Open = 373,
High = 380.6,
Low = 325.1,
Close = 355.8,
Volume = 607376290,
Change = -4.6,
Index = 219
});
this.Add(new StockTeslaItem()
{
Date = @"2025-02-26",
Open = 355,
High = 367.3,
Low = 288,
Close = 290.8,
Volume = 549149490,
Change = -18.1,
Index = 220
});
this.Add(new StockTeslaItem()
{
Date = @"2025-03-07",
Open = 291.2,
High = 303.9,
Low = 250.7,
Close = 262.7,
Volume = 754567280,
Change = -9.8,
Index = 221
});
this.Add(new StockTeslaItem()
{
Date = @"2025-03-18",
Open = 252.5,
High = 253.4,
Low = 217,
Close = 225.3,
Volume = 944623000,
Change = -10.8,
Index = 222
});
this.Add(new StockTeslaItem()
{
Date = @"2025-03-27",
Open = 231.6,
High = 291.8,
Low = 229.2,
Close = 273.1,
Volume = 982018670,
Change = 17.9,
Index = 223
});
this.Add(new StockTeslaItem()
{
Date = @"2025-04-07",
Open = 275.6,
High = 285,
Low = 214.2,
Close = 233.3,
Volume = 1117950500,
Change = -15.3,
Index = 224
});
this.Add(new StockTeslaItem()
{
Date = @"2025-04-16",
Open = 245,
High = 274.7,
Low = 217.8,
Close = 241.6,
Volume = 993815820,
Change = -1.4,
Index = 225
});
this.Add(new StockTeslaItem()
{
Date = @"2025-04-28",
Open = 243.5,
High = 294.9,
Low = 222.8,
Close = 285.9,
Volume = 866169890,
Change = 17.4,
Index = 226
});
}
}cs
@using IgniteUI.Blazor.Controls
<div class="container vertical">
<div class="container vertical fill">
<IgbDataChart
Name="chart"
@ref="chart"
PlotAreaMarginBottom="50"
ChartTitle="This sample demonstrates the DataAnnotationSliceLayer with overlay text compared against the value layers in the DataChart.">
<IgbCategoryXAxis
Name="xAxis"
@ref="xAxis"
DataSource="StockTesla"
Label="Date"
LabelLeftMargin="0"
LabelTopMargin="5"
LabelRightMargin="0"
LabelBottomMargin="15">
</IgbCategoryXAxis>
<IgbNumericYAxis
Name="yAxis"
@ref="yAxis"
LabelExtent="60"
LabelHorizontalAlignment="HorizontalAlignment.Center"
LabelLeftMargin="0"
LabelTopMargin="0"
LabelRightMargin="5"
LabelBottomMargin="0"
MinimumValue="0"
MaximumValue="550">
</IgbNumericYAxis>
<IgbLineSeries
Name="series1"
@ref="series1"
Title="Stock Price"
XAxisName="xAxis"
YAxisName="yAxis"
DataSource="StockTesla"
ValueMemberPath="Open"
ShowDefaultTooltip="true"
MarkerType="MarkerType.None"
Brush="black">
</IgbLineSeries>
<IgbValueOverlay
Name="valueOverlay"
@ref="valueOverlay"
Value="435"
Brush="green"
IsAxisAnnotationEnabled="true"
Thickness="2"
DashArray="@(new double[] { 2, 4 })"
AxisName="yAxis"
OverlayText="OverlayText on ValueOverlay"
OverlayTextLocation="OverlayTextLocation.OutsideBottomCenter">
</IgbValueOverlay>
<IgbValueLayer
Name="valueLayer"
@ref="valueLayer"
ValueMode="ValueLayerValueMode.Average"
Brush="purple"
Thickness="2"
DashArray="@(new double[] { 2, 4 })"
IsAxisAnnotationEnabled="true"
OverlayText="OverlayText on ValueLayer (Average)"
OverlayTextLocation="OverlayTextLocation.OutsideBottomCenter">
</IgbValueLayer>
<IgbDataAnnotationSliceLayer
Name="AnnoLayer"
@ref="annoLayer"
DataSource="AnnotationSliceMultiOverlayData"
Brush="green"
AnnotationTextColor="white"
AnnotationLabelMemberPath="Label"
AnnotationValueMemberPath="Value"
OverlayTextMemberPath="Label"
OverlayTextVerticalMargin="20"
OverlayTextHorizontalMargin="0"
OverlayTextLocation="OverlayTextLocation.OutsideBottomCenter"
OverlayText="OverlayText on DataAnnotationSliceLayer"
Thickness="2">
</IgbDataAnnotationSliceLayer>
</IgbDataChart>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var series1 = this.series1;
var valueOverlay = this.valueOverlay;
var valueLayer = this.valueLayer;
var annoLayer = this.annoLayer;
this.BindElements = () => {
valueLayer.TargetAxis = this.yAxis;
annoLayer.TargetAxis = this.yAxis;
};
this.BindElements();
}
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbLineSeries series1;
private IgbValueOverlay valueOverlay;
private IgbValueLayer valueLayer;
private IgbDataAnnotationSliceLayer annoLayer;
private StockTesla _stockTesla = null;
public StockTesla StockTesla
{
get
{
if (_stockTesla == null)
{
_stockTesla = new StockTesla();
}
return _stockTesla;
}
}
private AnnotationSliceMultiOverlayData _annotationSliceMultiOverlayData = null;
public AnnotationSliceMultiOverlayData AnnotationSliceMultiOverlayData
{
get
{
if (_annotationSliceMultiOverlayData == null)
{
_annotationSliceMultiOverlayData = new AnnotationSliceMultiOverlayData();
}
return _annotationSliceMultiOverlayData;
}
}
}razor/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Styling Overlay Text
이 코드 예제에서는 오버레이 텍스트의 스타일을 지정하고 사용자 지정하는 방법을 보여줍니다. DataAnnotationSliceLayer, IgbValueOverlay 그리고 IgbValueLayer.
public Series StylingOverlayText()
{
var annoLayer = new IgbDataAnnotationSliceLayer();
// styling optional overlay text
annoLayer.OverlayTextColor = Brushes.White;
annoLayer.OverlayTextBackground = Brushes.Green;
annoLayer.OverlayTextBorderColor = Brushes.Black;
annoLayer.OverlayTextBorderThickness = 1;
annoLayer.OverlayTextBorderRadius = 4;
annoLayer.OverlayTextHorizontalMargin = 5;
annoLayer.OverlayTextHorizontalPadding = 2;
annoLayer.OverlayTextVerticalMargin = 5;
annoLayer.OverlayTextVerticalPadding = 2;
return annoLayer;
}
razorAdditional Resources
다음 항목에서 관련 차트 유형에 대한 자세한 내용을 확인할 수 있습니다.
API References
다음은 위 섹션에서 언급된 API 멤버 목록입니다.
IgbDataChartDataSourceIgbValueOverlayAxisBrushIsAxisAnnotationsEnabledSeriesThicknessIgbValueLayerValueLayerValueModeValueLinesOverlayTextTargetAxisOverlayTextMemberPathOverlayTextColorOverlayTextBackgroundOverlayTextBorderColorOverlayTextLocation