Arction Ltd從事高性能的大數據可視化研發近15年，其下產品LightningChart處于行業絕對領先水平,本使用教程將會帶您學會如何使用LightningChart .NET進行數據可視化展示。

本教程解釋了如何使用兩個BarSeries創建一個簡單的 2D 圖表。
BarSeries將數據值表示為矩形條形，它可用于以非常清晰的方式可視化數據之間的差異和差異。

在本教程中， BarSeries用于表示兩年期間的月平均溫度。

本教程假設您已在WinForms 或 WPF 應用程序上使用LightningChart創建了一個新圖表。如果沒有，請按照我們的簡單 2D 圖表創建應用程序。

1. 創建一個新的 BarSeries 并為創建的系列添加樣式。

您可以使用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 來表示平均每月溫度并將它們添加到 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. 創建第二個 BarSeries 并為創建的系列添加樣式。

 // 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. 生成另一組數據作為 BarSeriesValues 來表示平均每月溫度并將它們添加到 BarSeries。

BarSeriesValue[] bars2 = new BarSeriesValue[]
{
    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允許將條形圖設置為按值索引、使用寬度擬合的索引或按位置值繪制圖表。

在本教程中，分組是使用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 屬性設置為 false 并將 CustomTicksEnabled 屬性設置為 true。

// Disable autoformating of labels.
axisX.AutoFormatLabels = false;

// Enable CustomAxisTicks.
axisX.CustomTicksEnabled = true;

點擊進入下一章：LightningChart .NET使用教程（七）：用于呈現財務數據的 2D StockSeries 圖表

如果您對該圖表控件感興趣，歡迎加入圖表控件QQ交流群：740060302

如果你想了解LightningChart.NET正版價格，歡迎查看產品介紹或