【點(diǎn)擊下載LightningChart Ultimate SDK最新版本】

本教程介紹如何使用兩個BarSeries創(chuàng)建簡單的2D圖表。 
BarSeries將數(shù)據(jù)值表示為矩形條，它可用于以非常清晰的方式可視化數(shù)據(jù)之間的差異和差異。

在本教程中，BarSeries用于表示兩年內(nèi)的月平均溫度。

本教程假定您已在WinForms或WPF應(yīng)用程序上使用LightningChart創(chuàng)建了新圖表。如果沒有，請按照我們的簡單二維圖表創(chuàng)建一個應(yīng)用程序。

1.創(chuàng)建新的BarSeries并為創(chuàng)建的系列添加樣式。

您可以使用System.Windows.Media.Color或System.Drawing.Color定義顏色，具體取決于您使用的是WPF還是WinForms。

// Create a new BarSeries.var barSeries1 = new BarSeries(chart.ViewXY, axisX, axisY);
 // Add styling to created series.
barSeries1.Fill.Color = Color.FromRgb(255, 165, 0); // Orange.
barSeries1.Fill.GradientFill = GradientFill.Solid;
barSeries1.Title.Text = "2017";
barSeries1.BarThickness = 10;

2.生成BarSeriesValues數(shù)據(jù)以表示月平均溫度并將其添加到BarSeries。

// Generate data as BarSeriesValues.
BarSeriesValue[] bars1 = new BarSeriesValue[]{
    new BarSeriesValue(0, -5, null),
    new BarSeriesValue(1, -6, null),
    new BarSeriesValue(2, -2, null),
    new BarSeriesValue(3, 4, null),
    new BarSeriesValue(4, 10, null),
    new BarSeriesValue(5, 14, null),
    new BarSeriesValue(6, 17, null),
    new BarSeriesValue(7, 15, null),
    new BarSeriesValue(8, 10, null),
    new BarSeriesValue(9, 6, null),
    new BarSeriesValue(10, -2, null),
    new BarSeriesValue(11, -4, null)};// Add BarSeriesValues to BarSeries.
barSeries1.Values = bars1;

3.將BarSeries添加到圖表。

// Add BarSeries to chart.
chart.ViewXY.BarSeries.Add(barSeries1);

4.創(chuàng)建第二個BarSeries并為創(chuàng)建的系列添加樣式。

// Create second BarSeries.var barSeries2 = new BarSeries();// Add styling to created series.
barSeries2.Fill.Color = Color.FromRgb(211, 211, 211); // LightGray.
barSeries2.Fill.GradientFill = GradientFill.Solid;
barSeries2.Title.Text = "2018";
barSeries2.BarThickness = 10;

5.生成另一組數(shù)據(jù)作為BarSeriesValues以表示月平均溫度并將其添加到BarSeries。

 new BarSeriesValue(0, -1, null),
    new BarSeriesValue(1, -1, null),
    new BarSeriesValue(2, 2, null),
    new BarSeriesValue(3, 8, null),
    new BarSeriesValue(4, 15, null),
    new BarSeriesValue(5, 19, null),
    new BarSeriesValue(6, 21, null),
    new BarSeriesValue(7, 19, null),
    new BarSeriesValue(8, 14, null),
    new BarSeriesValue(9, 8, null),
    new BarSeriesValue(10, 2, null),
    new BarSeriesValue(11, -7, null)};// Add BarSeriesValues to BarSeries.
barSeries2.Values = bars2;

6.將BarSeries添加到圖表。

// Add BarSeries to chart.
chart.ViewXY.BarSeries.Add(barSeries2);

LightningChart提供BarViewOptions屬性，用于自定義條形圖在圖表上的顯示方式。 
BarViewOptions.Grouping允許通過值索引，使用寬度擬合或位置值的索引來設(shè)置條形圖。

在本教程中，使用ByLocation -option 完成分組。

7.配置BarSeries的條形視圖布局。

// Configure bar view layout.
chart.ViewXY.BarViewOptions.Grouping = BarsGrouping.ByLocation;

LightningChart提供了使用CustomAxisTicks將您自己的自定義刻度添加為軸值的可能性。 
在本教程中，CustomAxisTicks用于將月份名稱顯示為X軸值。

// Create list of months.string[] months = new string[]{
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"};// Create CustomAxisTicks to display months as X-axis values.for (int i = 0; i < months.Length; i++){
    CustomAxisTick tick = new CustomAxisTick(axisX);
    tick.AxisValue = i;
    tick.LabelText = months[i];
    tick.Color = Color.FromArgb(35, 255, 255, 255);
    axisX.CustomTicks.Add(tick);}// Notify chart about set custom axis ticks.
axisX.InvalidateCustomTicks();

注意！為了正確顯示自定義軸刻度，請記住將AutoFormatLabels屬性設(shè)置為false，將CustomTicksEnabled屬性設(shè)置為true。

// Disable autoformating of labels.
axisX.AutoFormatLabels = false;// Enable CustomAxisTicks.
axisX.CustomTicksEnabled = true;

想要購買LightningChart Ultimate SDK正版授權(quán)的朋友可以。

有關(guān)產(chǎn)品動態(tài)的更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號▼▼▼