LightningChart.NET完全由GPU加速，并且性能經過優化，可用于實時顯示海量數據-超過10億個數據點。 LightningChart包括廣泛的2D，高級3D，Polar，Smith，3D餅/甜甜圈，地理地圖和GIS圖表以及適用于科學，工程，醫學，航空，貿易，能源和其他領域的體繪制功能。

在上文中（點擊這里回顧>>），我們為大家介紹了天氣數據可視化的概念以及一些項目概述、前期準備等，本文將繼續介紹具體的代碼部分，請持續關注哦！

代碼審查

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

在代碼中我們將檢查兩個方法，它們將創建正確繪制WPF天氣數據可視化圖表所需的屬性。交互式示例使用各種用戶控件構建，以操縱和更改圖表的視覺屬性。生成這個圖不需要這些控件，因此我們將重點關注負責生成對象的代碼。

MakeSourceData()

我們將從InitializeComponent方法開始，這將允許加載XAML模板并訪問其中的對象。

InitializeComponent();
MakeSourceData();

一旦加載了XAML組件，我們就可以開始編程這個天氣數據可視化應用實例了。為了處理圖像、操縱它們并將它們加載到圖表中，需要將他們轉換為位圖。在項目資源文件夾中，您可以找到一個圖像，它將幫助我們創建雨“clouds”，該圖像將被轉換成位圖，我們將使用工具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);
}
}

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

CreateChart()

CreateChart方法將構造圖表對象，該對象將顯示在XAML框架中，我們需要創建一個LightningChart類型對象。這個構造函數將允許我們創建圖表的實例，指定圖表的類型，并訪問不同的屬性。

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

_BeginUpdate

BeginUpdate函數將允許我們停止繪制圖表，這將允許設置想要的自定義屬性。只要更新沒有關閉，圖表就不會顯示所做的更改，這將有助于圖表構建的性能。

_chart.BeginUpdate();

圖表類型

我們需要指定激活圖標視圖或將要創建的圖表類型，在本例中我們使用XY視圖，有幾種類型的視圖：

• XY
• 3D
• 3D餅圖
• 雷達圖
• Smith

_chart.ActiveView = ActiveView.ViewXY;

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

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

地理矢量數據存儲在LightningChart地圖文件中，擴展名為.md。LightningChart提供了一組地圖文件，X軸用于經度，Y軸用于緯度，緯度原點為赤道，經度原點為Greenwich, U.K。

Map屬性

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

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

_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);

應用程序背景顏色

背景填充支持：

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

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

自動軸布局

自動軸布局可以被禁用，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;

刪除頁邊距

可以從天氣數據可視化應用程序中刪除邊距，代碼如下：

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

IntensityGridSeries()

環境系列

現在我們將開始創建圖例框，它將顯示每毫米雨的強度顏色，我們需要配置一個強度網格系列來渲染地理地圖上的環境數據。

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類需要三個參數才能工作：

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

在這些屬性中，我們可以發現一些對流程優化的關注。

• FullInterpolation：啟用FullInterpolation屬性來在填充中使用增強的插值方法，請注意這將導致更多的CPU和GPU使用。通過使用全插值，填充質量更好，但只有當數據數組大小相當小時才能看到填充質量。
• Optimization：使用Optimization：DynamicValuesData只更新Data數組的Value字段。

并調用InvalidateValuesDataOnly方法來更新圖表，通過這種方式，更新速度要快得多，因為不需要重新計算序列的幾何形狀。這僅用于節點的數據X和Y值保持在同一位置的應用程序，例如在熱成像解決方案中。

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

添加數據

要添加數據，我們需要設置之前映射到data屬性的值，在圖表中加入環境系列：

_chart.ViewXY.IntensityGridSeries.Add(environmentalSeries);

在環境數據中添加模板區域

IntensityGridSeries, IntensityMeshSeries和Maps都有StencilArea特性，它允許在繪制的數據區域內或外屏蔽。

配置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;

我們可以通過選擇X或Y列表來訪問和配置每個軸，在本例中，我們只使用一個X、Y和Z軸，因此我們選擇索引0。

ScrollMode

在進行實時監控應用程序時，必須滾動X軸來正確顯示當前監控位置，該位置通常是最新信號點的時間戳。

在將新信號點設置為一系列之后，將最新的時間戳設置為ScrollPosition屬性。LightningChart有幾種滾動模式，您可以使用ScrollMode屬性訪問它們。

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

設置LegendBoxes

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

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

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

_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);

最終圖表

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

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

總結

我們完成了這個天氣圖形教程，感謝大家觀看！在本教程中，我們為某國地區創建了一個高級的、高性能的、交互式的溫度參數天氣映射系統。

正如您所看到的，這個氣象地圖應用程序是完全可定制的，從開發人員的角度來看，每個屬性和最終用戶特性都可以根據需要進行定制。

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