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了什么是WPF 2D熱圖及項(xiàng)目的基本概述和設(shè)置等，本文將繼續(xù)重點(diǎn)介紹代碼部分的實(shí)現(xiàn)，請(qǐng)繼續(xù)關(guān)注我們獲取更多LightningChart中文教程指南哦~

代碼審查

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

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

CreateChart()

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

_chart = new LightningChart();

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

_chart.BeginUpdate();

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

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

我們可以訪問(wèn)X軸和Y軸，并將這些對(duì)象分配給AxisX/AxisY對(duì)象。

// 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有以下選項(xiàng)：

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

配置圖例框

圖例框可以自動(dòng)或手動(dòng)放置，自動(dòng)放置允許它們對(duì)齊到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;

位置選項(xiàng)有：TopCenter, TopLeft, TopRight, LeftCenter, RightCenter, BottomLeft, BottomCenter, BottomRight, Manual。

為數(shù)據(jù)準(zhǔn)備IntensityGridSeries

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

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

_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)建強(qiáng)度網(wǎng)格數(shù)據(jù)

使用SetHeightDataFromBitmap方法來(lái)實(shí)現(xiàn)這一點(diǎn)。

series Data數(shù)組屬性獲取位圖大小的大小(如果不使用抗混疊或重采樣)，對(duì)于每個(gè)位圖圖像像素，紅色、綠色和藍(lán)色值被求和。和越大，該節(jié)點(diǎn)的數(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屬性選擇填充樣式，以下選項(xiàng)可用：

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

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

等高線

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

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

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)用程序

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

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

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

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