LightningChart.NET完全由GPU加速，并且性能經(jīng)過(guò)優(yōu)化，可用于實(shí)時(shí)顯示海量數(shù)據(jù)-超過(guò)10億個(gè)數(shù)據(jù)點(diǎn)。 LightningChart包括廣泛的2D，高級(jí)3D，Polar，Smith，3D餅/甜甜圈，地理地圖和GIS圖表以及適用于科學(xué)，工程，醫(yī)學(xué)，航空，貿(mào)易，能源和其他領(lǐng)域的體繪制功能。

在上文中（點(diǎn)擊這里回顧>>），我們?yōu)榇蠹医榻B了天氣數(shù)據(jù)可視化的概念以及一些項(xiàng)目概述、前期準(zhǔn)備等，本文將繼續(xù)介紹具體的代碼部分，請(qǐng)持續(xù)關(guān)注哦！

代碼審查

主代碼將被封裝在MainWindow.xaml.cs中，在這里我們將找到UI控件的代碼。

在代碼中我們將檢查兩個(gè)方法，它們將創(chuàng)建正確繪制WPF天氣數(shù)據(jù)可視化圖表所需的屬性。交互式示例使用各種用戶控件構(gòu)建，以操縱和更改圖表的視覺屬性。生成這個(gè)圖不需要這些控件，因此我們將重點(diǎn)關(guān)注負(fù)責(zé)生成對(duì)象的代碼。

MakeSourceData()

我們將從InitializeComponent方法開始，這將允許加載XAML模板并訪問(wèn)其中的對(duì)象。

InitializeComponent();
MakeSourceData();

一旦加載了XAML組件，我們就可以開始編程這個(gè)天氣數(shù)據(jù)可視化應(yīng)用實(shí)例了。為了處理圖像、操縱它們并將它們加載到圖表中，需要將他們轉(zhuǎn)換為位圖。在項(xiàng)目資源文件夾中，您可以找到一個(gè)圖像，它將幫助我們創(chuàng)建雨“clouds”，該圖像將被轉(zhuǎn)換成位圖，我們將使用工具GetPixelColors提取圖像的顏色。

System.Drawing.Bitmap bitmapDataSource = new System.Drawing.Bitmap(Environment.CurrentDirectory + @"\Resources\EnvironmentalData200x150.png");
//Use fast method for getting pixel colors
System.Drawing.Color[,] aPixelColors = ChartTools.GetPixelColors(bitmapDataSource);
int width = aPixelColors.GetLength(0);
int iHeight = aPixelColors.GetLength(1);
//The data array has value range of 0...1
m_aEnvironmentalData = new double[width][];
for (int column = 0; column < width; column++)
{
m_aEnvironmentalData[column] = new double[iHeight];
for (int row = 0; row < iHeight; row++)
{
m_aEnvironmentalData[column][row] = (aPixelColors[column, row].R + aPixelColors[column, row].G
+ aPixelColors[column, row].B) / (3.0 * 255.0);
}
}

 這個(gè)工具允許我們一次獲得所有像素的顏色，替換對(duì)圖像的每個(gè)像素進(jìn)行操作。最后，我們將按列和行獲取圖像的所有值，這些值將存儲(chǔ)在變量m_aEnvironmentalData中。

CreateChart()

CreateChart方法將構(gòu)造圖表對(duì)象，該對(duì)象將顯示在XAML框架中，我們需要?jiǎng)?chuàng)建一個(gè)LightningChart類型對(duì)象。這個(gè)構(gòu)造函數(shù)將允許我們創(chuàng)建圖表的實(shí)例，指定圖表的類型，并訪問(wèn)不同的屬性。

_chart = new LightningChart
{
ChartName = "Stencil map chart"
};

_BeginUpdate

BeginUpdate函數(shù)將允許我們停止繪制圖表，這將允許設(shè)置想要的自定義屬性。只要更新沒有關(guān)閉，圖表就不會(huì)顯示所做的更改，這將有助于圖表構(gòu)建的性能。

_chart.BeginUpdate();

圖表類型

我們需要指定激活圖標(biāo)視圖或?qū)⒁獎(jiǎng)?chuàng)建的圖表類型，在本例中我們使用XY視圖，有幾種類型的視圖：

• XY
• 3D
• 3D餅圖
• 雷達(dá)圖
• Smith

_chart.ActiveView = ActiveView.ViewXY;

現(xiàn)在我們將通過(guò)markdown文檔(MD)文件加載地圖，您可以在項(xiàng)目的Maps文件夾中找到該文件，提取的對(duì)象將被分配給XY圖表的Maps屬性。

string path = Environment.CurrentDirectory + @"\Maps\" + DefaultMap + ".md";
if (path != "")
{
_chart.ViewXY.Maps.Path = System.IO.Path.GetDirectoryName(path);
}

地理矢量數(shù)據(jù)存儲(chǔ)在LightningChart地圖文件中，擴(kuò)展名為.md。LightningChart提供了一組地圖文件，X軸用于經(jīng)度，Y軸用于緯度，緯度原點(diǎn)為赤道，經(jīng)度原點(diǎn)為Greenwich, U.K。

Map屬性

我們將從設(shè)置地圖的屬性開始，在X軸和Y軸范圍保持不變的典型情況下，將 ViewXY.Maps.Optimization設(shè)置為CombinedLayers，并且在地圖上顯示其他數(shù)據(jù)。這允許將地圖層渲染到相同的緩沖圖像中，從而提高渲染效率。

 CalcGradient工具將計(jì)算兩種顏色之間的漸變顏色，第一個(gè)參數(shù)是初始顏色，第二個(gè)是最終顏色，第三個(gè)值是以百分比表示的漸變顏色位置。

_chart.ViewXY.Maps.Type = DefaultMap;
_chart.ViewXY.Maps.AllowUserInteraction = false;
_chart.ViewXY.Maps.Optimization = Map.RenderingOptimization.CombinedLayers;
_chart.ViewXY.Maps.LandOptions.Fill.Color = Colors.DarkBlue;
_chart.ViewXY.Maps.LandOptions.Fill.GradientColor = Colors.Black;
_chart.ViewXY.Maps.LandOptions.Fill.GradientFill = GradientFill.RadialStretched;
_chart.ViewXY.Maps.LandOptions.LineStyle.Color = Colors.Silver;
_chart.ViewXY.Maps.LakeOptions.Fill.Color = Colors.DeepSkyBlue;
_chart.ViewXY.Maps.LakeOptions.Fill.GradientColor = ChartTools.CalcGradient(Colors.DeepSkyBlue, Colors.Black, 80);

應(yīng)用程序背景顏色

背景填充支持：

• 純色填充，設(shè)置GradientFill = Solid，并使用Color來(lái)定義顏色。
• 漸變填充，從Color到GradientColor。設(shè)置GradientFill = Linear / Radial / RadialStretched / Cylindrical，使用GradientDirection來(lái)控制線性和圓柱漸變的填充方向。
• 位圖填充，具有不同的平鋪和拉伸選項(xiàng)。位圖色彩和alpha也支持半透明的位圖填充。

_chart.ViewXY.GraphBackground.Color = Color.FromArgb(255, 0, 0, 64);
_chart.ViewXY.GraphBackground.GradientColor = Colors.Black;
_chart.ViewXY.GraphBackground.GradientFill = GradientFill.Linear;

自動(dòng)軸布局

自動(dòng)軸布局可以被禁用，XAxisAutoPlacement控制如何垂直放置X軸，YAxisAutoPlacement控制Y軸的水平放置方式。

_chart.ViewXY.AxisLayout.AutoAdjustMargins = false;
_chart.ViewXY.AxisLayout.XAxisAutoPlacement = XAxisAutoPlacement.Off;
_chart.ViewXY.AxisLayout.YAxisAutoPlacement = YAxisAutoPlacement.Off;
_chart.ViewXY.AxisLayout.XAxisTitleAutoPlacement = false;
_chart.ViewXY.AxisLayout.YAxisTitleAutoPlacement = false;

刪除頁(yè)邊距

可以從天氣數(shù)據(jù)可視化應(yīng)用程序中刪除邊距，代碼如下：

_chart.ViewXY.Margins = new Thickness(0, 0, 0, 0);

IntensityGridSeries()

環(huán)境系列

現(xiàn)在我們將開始創(chuàng)建圖例框，它將顯示每毫米雨的強(qiáng)度顏色，我們需要配置一個(gè)強(qiáng)度網(wǎng)格系列來(lái)渲染地理地圖上的環(huán)境數(shù)據(jù)。

IntensityGridSeries environmentalSeries = new IntensityGridSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
environmentalSeries.Title.Text = "Rain";
environmentalSeries.FullInterpolation = checkBoxFullInterpolation.IsChecked.Value;
environmentalSeries.Optimization = IntensitySeriesOptimization.DynamicValuesData;
environmentalSeries.AllowUserInteraction = false; //Disable mouse interaction to make DynamicValuesData optimization effective.
environmentalSeries.LegendBoxUnits = "mm/h";
environmentalSeries.LegendBoxValuesFormat = "0.0";
environmentalSeries.SetRangesXY(-125, -65, 24, 49);
environmentalSeries.Data = new IntensityPoint[m_aEnvironmentalData.GetLength(0), m_aEnvironmentalData[0].GetLength(0)];

IntensityGridSeries類需要三個(gè)參數(shù)才能工作：

1. 需要它的所有者或父對(duì)象
2. X軸
3. Y軸

在這些屬性中，我們可以發(fā)現(xiàn)一些對(duì)流程優(yōu)化的關(guān)注。

• FullInterpolation：?jiǎn)⒂肍ullInterpolation屬性來(lái)在填充中使用增強(qiáng)的插值方法，請(qǐng)注意這將導(dǎo)致更多的CPU和GPU使用。通過(guò)使用全插值，填充質(zhì)量更好，但只有當(dāng)數(shù)據(jù)數(shù)組大小相當(dāng)小時(shí)才能看到填充質(zhì)量。
• Optimization：使用Optimization：DynamicValuesData只更新Data數(shù)組的Value字段。

并調(diào)用InvalidateValuesDataOnly方法來(lái)更新圖表，通過(guò)這種方式，更新速度要快得多，因?yàn)椴恍枰匦掠?jì)算序列的幾何形狀。這僅用于節(jié)點(diǎn)的數(shù)據(jù)X和Y值保持在同一位置的應(yīng)用程序，例如在熱成像解決方案中。

SetRanges：同時(shí)設(shè)置X和Y范圍，與單獨(dú)設(shè)置RangeMinX、RangeMaxX、RangeMinY和RangeMaxY屬性相比，這是一種非常高效的CPU方式。

添加數(shù)據(jù)

要添加數(shù)據(jù)，我們需要設(shè)置之前映射到data屬性的值，在圖表中加入環(huán)境系列：

_chart.ViewXY.IntensityGridSeries.Add(environmentalSeries);

在環(huán)境數(shù)據(jù)中添加模板區(qū)域

IntensityGridSeries, IntensityMeshSeries和Maps都有StencilArea特性，它允許在繪制的數(shù)據(jù)區(qū)域內(nèi)或外屏蔽。

配置X軸

_chart.ViewXY.XAxes[0].ScrollMode = XAxisScrollMode.None;
_chart.ViewXY.XAxes[0].SetRange(-130, -65);
_chart.ViewXY.XAxes[0].ValueType = AxisValueType.MapCoordsDegMinSecNESW;
Color color = Colors.Turquoise;
_chart.ViewXY.XAxes[0].MajorGrid.Color = Color.FromArgb(40, color.R, color.G, color.B);
_chart.ViewXY.XAxes[0].LabelsColor = Colors.White;
_chart.ViewXY.XAxes[0].MajorDivTickStyle.Alignment = Alignment.Near;
_chart.ViewXY.XAxes[0].LabelsPosition = Alignment.Near;
_chart.ViewXY.XAxes[0].MajorDivTickStyle.Color = Colors.White;
_chart.ViewXY.XAxes[0].VerticalAlign = AlignmentVertical.Top;

 我們可以通過(guò)選擇X或Y列表來(lái)訪問(wèn)和配置每個(gè)軸，在本例中，我們只使用一個(gè)X、Y和Z軸，因此我們選擇索引0。

ScrollMode

 在進(jìn)行實(shí)時(shí)監(jiān)控應(yīng)用程序時(shí)，必須滾動(dòng)X軸來(lái)正確顯示當(dāng)前監(jiān)控位置，該位置通常是最新信號(hào)點(diǎn)的時(shí)間戳。

在將新信號(hào)點(diǎn)設(shè)置為一系列之后，將最新的時(shí)間戳設(shè)置為ScrollPosition屬性。LightningChart有幾種滾動(dòng)模式，您可以使用ScrollMode屬性訪問(wèn)它們。

• None：設(shè)置ScrollPosition值時(shí)不應(yīng)用滾動(dòng)，當(dāng)在其他應(yīng)用程序中使用圖表而不是實(shí)時(shí)監(jiān)控時(shí)，這通常是要使用的選擇。
• Stepping：當(dāng)收集到的數(shù)據(jù)到達(dá)X軸的末端時(shí)，包含所有系列數(shù)據(jù)的軸向左移動(dòng)一個(gè)步進(jìn)間隔。每次到達(dá)x軸末端時(shí)都會(huì)執(zhí)行此移動(dòng)，SteppingInterval屬性定義為取值范圍。
• Scrolling：X軸保持靜止，直到達(dá)到滾動(dòng)間隙，之后所有系列的X軸連續(xù)向左移動(dòng)。如果滾動(dòng)應(yīng)該在滾動(dòng)位置到達(dá)X軸末端時(shí)生效，則將ScrollingGap設(shè)置為0，ScrollingGap屬性定義為圖形寬度的百分比。
• Sweeping：掃描模式可能提供了最友好的實(shí)時(shí)監(jiān)控視圖，掃描使用兩個(gè)X軸，第一個(gè)軸被收集滿，之后出現(xiàn)一個(gè)掃過(guò)的間隙，然后第二個(gè)X軸掃過(guò)第一個(gè)X軸，兩個(gè)X軸都顯示它們的值標(biāo)簽，SweepingGap屬性定義為圖形寬度的百分比。
• Triggering：X軸位置由超過(guò)或低于觸發(fā)水平的一系列值確定，使用Triggering屬性設(shè)置觸發(fā)選項(xiàng)?？梢酝ㄟ^(guò)啟用Triggering.TriggeringActive 屬性將出發(fā)設(shè)置為激活狀態(tài)。
• MajorGrid：水平網(wǎng)格線繪制在分割刻度的垂直位置上，大柵格表示大劃分刻度，小柵格表示小劃分刻度，使用MajorGrid和MinorGrid屬性來(lái)編輯外觀。
• MajorDivTickStyle：主要?jiǎng)澐珠g距可以通過(guò)使AutoDivSpacing啟用來(lái)自動(dòng)完成。根據(jù)標(biāo)簽字體大小和AutoDivSeparationPercent屬性，盡可能方便用戶地計(jì)算間距，增加該值以減少主要部門的數(shù)量。
• Minor divisions：使用MinorDivCount屬性值在大分區(qū)之間計(jì)算。
• Major division tick style可以通過(guò)MajorDivTickStyle屬性設(shè)置，使用MajorDivTickStyleAlignment屬性編輯刻度和標(biāo)簽的方向，值標(biāo)簽被繪制在主要除法刻度旁邊，分別使用MinorDivTickStyle屬性編輯次要分割屬性。

_chart.ViewXY.YAxes[0].SetRange(23, 53);
_chart.ViewXY.YAxes[0].ValueType = AxisValueType.MapCoordsDegNESW;
color = Colors.Turquoise;
_chart.ViewXY.YAxes[0].MajorGrid.Color = Color.FromArgb(40, color.R, color.G, color.B);
_chart.ViewXY.YAxes[0].LabelsColor = Colors.White;
_chart.ViewXY.YAxes[0].MajorDivTickStyle.Alignment = Alignment.Far;
_chart.ViewXY.YAxes[0].MajorDivTickStyle.Color = Colors.White;
_chart.ViewXY.YAxes[0].Alignment = AlignmentHorizontal.Right;

設(shè)置LegendBoxes

圖例框可以自動(dòng)或手動(dòng)放置，自動(dòng)放置允許它們對(duì)齊到圖形段的左/上/右/底部，或在空白處。

用position屬性控制位置，位置選項(xiàng)有：TopCenter, TopLeft, TopRight, LeftCenter, RightCenter, BottomLeft, BottomCenter, BottomRight, Manual。

Offset屬性將位置從position屬性確定的位置移動(dòng)給定的量，手動(dòng)定位計(jì)算從圖例框左上角到視圖左上角的偏移量。

_chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;
_chart.ViewXY.LegendBoxes[0].Fill.Color = Colors.Transparent;
_chart.ViewXY.LegendBoxes[0].Fill.GradientFill = GradientFill.Solid;
_chart.ViewXY.LegendBoxes[0].UnitsColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].ValueLabelColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].SeriesTitleColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].Offset = new PointIntXY(0, -100);

最終圖表

為了完成對(duì)天氣預(yù)報(bào)分析和可視化圖表的配置，我們使用EndUpdate方法，該方法將恢復(fù)繪圖控件，用分配的屬性更新圖表。圖表對(duì)象將被添加到XAML網(wǎng)格中，以便向用戶顯示。

_chart.EndUpdate();
_chart.Loaded += _chart_Loaded;
gridChart.Children.Add(_chart);
_chartInitialized = true;

總結(jié)

我們完成了這個(gè)天氣圖形教程，感謝大家觀看！在本教程中，我們?yōu)槟硣?guó)地區(qū)創(chuàng)建了一個(gè)高級(jí)的、高性能的、交互式的溫度參數(shù)天氣映射系統(tǒng)。

正如您所看到的，這個(gè)氣象地圖應(yīng)用程序是完全可定制的，從開發(fā)人員的角度來(lái)看，每個(gè)屬性和最終用戶特性都可以根據(jù)需要進(jìn)行定制。

LightningChart.NET提供了不同的地理地圖，可以用來(lái)生成任何世界氣象地圖和任何其他需要的地圖應(yīng)用程序。