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

在上文中（點擊這里回顧>>），我們?yōu)榇蠹医榻B了什么是WPF 2D熱圖及項目的基本概述和設(shè)置等，本文將繼續(xù)重點介紹代碼部分的實現(xiàn)，請繼續(xù)關(guān)注我們獲取更多LightningChart中文教程指南哦~

代碼審查

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

在代碼中，我們將檢查兩個方法，它們將創(chuàng)建正確繪制2D熱圖所需的屬性。交互式示例使用各種用戶控件構(gòu)建，來操縱和更改圖表的視覺屬性。生成這個圖不需要這些控件，因此我們將重點關(guān)注負責生成對象的代碼。

CreateChart()

這個主方法將創(chuàng)建2D熱圖對象：

_chart = new LightningChart();

我們需要在更新圖表屬性時禁用控件重繪，BeginUpdate()將重新繪制控件。

_chart.BeginUpdate();

LightningChart 2D熱圖有以下主要視圖：ViewXY, View3D, ViewPie3D, ViewPolar, ViewSmith，可以通過設(shè)置ActiveView屬性來更改可見視圖，默認視圖為ViewXY。

_chart.ActiveView = ActiveView.ViewXY;
_chart.ChartName = "Heat map chart";

我們可以訪問X軸和Y軸，并將這些對象分配給AxisX/AxisY對象。

// Configure x-axis.
_chart.ViewXY.XAxes[0].ValueType = AxisValueType.Number;
_chart.ViewXY.XAxes[0].ScrollMode = XAxisScrollMode.None;
_chart.ViewXY.XAxes[0].SetRange(0, 100);
// Configure y-axis.
_chart.ViewXY.YAxes[0].SetRange(0, 100);

ValueType有以下選項：

• Number：用于整數(shù)和十進制表示的常規(guī)數(shù)字格式，當AutoFormatLabels被禁用時，應(yīng)用LabelsNumberFormat默認值。
• Time：用于一天中的時間演示，當禁用AutoFormatLabelsis時，應(yīng)用LabelsTimeFormat。
• DateTime：日期顯示，可選擇的時間一天。當AutoFormatLabels被禁用時，LabelsTimeFormat也應(yīng)用于此，類似于Time type。
• SetRange：通過給最小和最大屬性賦值來設(shè)置軸的值范圍，最小值應(yīng)該小于最大值。當嘗試設(shè)置Minimum 大于 Maximum或反之亦然時，內(nèi)部限制器將限制接近另一個值的值。要同時設(shè)置兩個值，請使用SetRange(…)方法。在SetRange中傳入Minimum 大于 Maximum會自動翻轉(zhuǎn)這些值，使Minimum 小于 Maximum。

配置圖例框

圖例框可以自動或手動放置，自動放置允許它們對齊到2D熱圖段的左/上/右/底部，或在邊緣，用position屬性控制位置。

//Configure legend
_chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;
_chart.ViewXY.LegendBoxes[0].Offset = new PointIntXY(-15, -70);
// Configure legend box.
_chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;

位置選項有：TopCenter, TopLeft, TopRight, LeftCenter, RightCenter, BottomLeft, BottomCenter, BottomRight, Manual。

為數(shù)據(jù)準備IntensityGridSeries

IntensityGridSeries允許可視化M x N個節(jié)點數(shù)組，通過指定的值范圍調(diào)色板著色，節(jié)點之間的顏色被插值。

IntensityGridSeries是X和Y維度上均勻間隔的矩形序列，這個系列允許繪制等高線、等高線標簽和線框圖。

_intensityGrid = new IntensityGridSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0])
{
ContourLineType = ContourLineTypeXY.None,
Optimization = IntensitySeriesOptimization.DynamicData,
LegendBoxUnits = "°C",
LegendBoxValuesFormat = "0"
};
_intensityGrid.Title.Text = "Heat map";
_intensityGrid.AllowUserInteraction = false;
_chart.ViewXY.IntensityGridSeries.Add(_intensityGrid);

從位圖文件創(chuàng)建強度網(wǎng)格數(shù)據(jù)

使用SetHeightDataFromBitmap方法來實現(xiàn)這一點。

series Data數(shù)組屬性獲取位圖大小的大小(如果不使用抗混疊或重采樣)，對于每個位圖圖像像素，紅色、綠色和藍色值被求和。和越大，該節(jié)點的數(shù)據(jù)值就越大。黑色和深色得到較低的值，而明亮和白色得到較高的值。

主圖像將位于資源文件夾中

private void SetExampleData()
{
// Load example data from resource stream.
string strResourceImage = "Ground400x240.jpg";
string baseDirectory = Environment.CurrentDirectory;
System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(baseDirectory + @"\Resources\" + strResourceImage);
CreateIntensitySeriesData(bitmap);
}

填充樣式

private void ApplyFillStyle()
{
if (_constructing == true)
{
return;
}
// Disable rendering, strongly recommended before updating chart properties.
_chart.BeginUpdate();
if (radioButtonSourceDataColoring.IsChecked == true)
{
_intensityGrid.Fill = IntensityFillStyle.FromSurfacePoints;
}
else if (radioButtonValueColoringGradient.IsChecked == true)
{
_intensityGrid.Fill = IntensityFillStyle.Paletted;
_intensityGrid.ValueRangePalette.Type = PaletteType.Gradient;
}
else if (radioButtonValueColoringSolid.IsChecked == true)
{
_intensityGrid.Fill = IntensityFillStyle.Paletted;
_intensityGrid.ValueRangePalette.Type = PaletteType.Uniform;
}
else if (radioButtonSingleColor.IsChecked == true)
{
_intensityGrid.Fill = IntensityFillStyle.Toned;
}

使用Fill屬性選擇填充樣式，以下選項可用：

• None：通過使用這個，沒有填充應(yīng)用，這個選擇對于線框網(wǎng)格很有用。
• FromSurfacePoints：使用Data屬性節(jié)點的顏色。
• Toned：ToneColor適用。
• PalettedByY：通過調(diào)色板的Y值著色。
• PalettedByValue：調(diào)色板通過SurfacePoint的值字段著色。
• Bitmap：位圖圖像被拉伸以覆蓋整個二維熱圖表面，在BitmapFill屬性中設(shè)置位圖圖像，BitmapFill屬性具有垂直和水平鏡像圖像的子屬性。

啟用FullInterpolation屬性來在填充中使用增強的插值方法，請注意這將導(dǎo)致更多的CPU和GPU使用。通過使用全插值，填充質(zhì)量更好，但只有當數(shù)據(jù)數(shù)組大小相當小時才能看到填充質(zhì)量。

等高線

等高線：登高線可以與填充和線框?qū)傩砸黄鹗褂茫ㄟ^設(shè)置ContourLineType屬性，可以繪制不同樣式的等高線：

• None：沒有等高線顯示。
• FastColorZones：線條在調(diào)色板步驟末端繪制為細區(qū)域，允許非常強大的渲染，這非常適合連續(xù)更新或動畫表面。陡峭的數(shù)值變化用細線表示，而平緩的高差用粗線表示。每條線都使用ContourLineStyle.Color定義的相同顏色，區(qū)域?qū)挾瓤梢酝ㄟ^FastContourZoneRange屬性設(shè)置，該值在y軸范圍內(nèi)。
• FastPalettedZones：與FastColorZones類似，但線條著色遵循ValueRangePalette選項。
• ColorLine：像FastColorZones一樣，但是等高線是實際的線。渲染需要更長的時間，不建議持續(xù)更新或動畫2D熱圖表面，線寬可以用ContourLineStyle.Width屬性來調(diào)整。
• PalettedLine：與ColorLine類似，但線條著色遵循ValueRangePalette選項。

private void ApplyContourLinesStyle()
{
if (_constructing == true)
{
return;
}
// Disable rendering, strongly recommended before updating chart properties.
_chart.BeginUpdate();
if (radioButtonContourNone.IsChecked == true)
{
_intensityGrid.ContourLineType = ContourLineTypeXY.None;
}
else if (radioButtonContourFastZones.IsChecked == true)
{
_intensityGrid.ContourLineType = ContourLineTypeXY.FastColorZones;
}
else if (radioButtonContourFastPalettedZones.IsChecked == true)
{
_intensityGrid.ContourLineType = ContourLineTypeXY.FastPalettedZones;
}
else if (radioButtonContourLines.IsChecked == true)
{
_intensityGrid.ContourLineType = ContourLineTypeXY.ColorLine;
}
else if (radioButtonContourPalettedLines.IsChecked == true)
{
_intensityGrid.ContourLineType = ContourLineTypeXY.PalettedLine;
}

最終的WPF 2D熱圖應(yīng)用程序

這個項目的邏輯是基于一個網(wǎng)格型的二維熱圖，如果我們選擇允許觀察線框的選項，將看到每個生成的節(jié)點。

最高值將顯示為紅色，最低值將顯示為紫色。對于本例，強度范圍內(nèi)的值與圖像中每個像素的顏色強度成正比。如果您上傳的圖像背景為黑色，則它將在熱圖中顯示紫色，因為它是強度范圍中最暗的顏色。

例如，我們可以通過觀察強烈的膚色來識別人類面部溫度最高的區(qū)域。在下面的圖片中，我們可以注意到，面部最熱的區(qū)域在40-50攝氏度之間(這對人類來說是相當高的，但可以說這是一個可以接受的范圍，用于演示目的)，而最冷的區(qū)域在30攝氏度之間。

LightningChart.NET庫允許我們識別顏色并生成自己的調(diào)整來制作漸變層，這有助于我們識別許多研究案例的強度，例如溫度，振動等。