Arction Ltd從事高性能的大數(shù)據(jù)可視化研發(fā)近15年，其下產(chǎn)品LightningChart處于行業(yè)絕對領(lǐng)先水平,本使用教程將會帶您學(xué)會如何使用LightningChart .NET進(jìn)行數(shù)據(jù)可視化展示。

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

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

本教程假設(shè)您已在WinForms 或 WPF 應(yīng)用程序上使用LightningChart創(chuàng)建了一個新圖表。如果沒有，請按照我們的簡單 2D 圖表創(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. 生成數(shù)據(jù)作為 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. 創(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。

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允許將條形圖設(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;

點(diǎn)擊進(jìn)入下一章：LightningChart .NET使用教程（七）：用于呈現(xiàn)財務(wù)數(shù)據(jù)的 2D StockSeries 圖表

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

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