圖表控件LightningChart .NET中文教程 - 如何創建WPF 2D熱圖?(二)

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

在上文中(點擊這裏回顧>>),我們爲大家介紹了什麼是WPF 2D熱圖及項目的基本概述和設置等,本文將繼續重點介紹代碼部分的實現,請繼續關注我們獲取更多LightningChart中文教程指南哦~

代碼審查

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

圖表控件LightningChart .NET中文教程

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

CreateChart()

這個主方法將創建2D熱圖對象:

_chart = new LightningChart();

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

_chart.BeginUpdate();

LightningChart 2D熱圖有以下主要視圖:ViewXY, View3D, ViewPie3D, ViewPolar, ViewSmith,可以通過設置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:用於整數和十進制表示的常規數字格式,當AutoFormatLabels被禁用時,應用LabelsNumberFormat默認值。
  • Time:用於一天中的時間演示,當禁用AutoFormatLabelsis時,應用LabelsTimeFormat。
  • DateTime:日期顯示,可選擇的時間一天。當AutoFormatLabels被禁用時,LabelsTimeFormat也應用於此,類似於Time type。
  • SetRange:通過給最小和最大屬性賦值來設置軸的值範圍,最小值應該小於最大值。當嘗試設置Minimum 大於 Maximum或反之亦然時,內部限制器將限制接近另一個值的值。要同時設置兩個值,請使用SetRange(…)方法。在SetRange中傳入Minimum 大於 Maximum會自動翻轉這些值,使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。

爲數據準備IntensityGridSeries

IntensityGridSeries允許可視化M x N個節點數組,通過指定的值範圍調色板着色,節點之間的顏色被插值。

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

從位圖文件創建強度網格數據

使用SetHeightDataFromBitmap方法來實現這一點。

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

圖表控件LightningChart .NET中文教程

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

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:通過使用這個,沒有填充應用,這個選擇對於線框網格很有用。
  • FromSurfacePoints:使用Data屬性節點的顏色。
  • Toned:ToneColor適用。
  • PalettedByY:通過調色板的Y值着色。
  • PalettedByValue:調色板通過SurfacePoint的值字段着色。
  • Bitmap:位圖圖像被拉伸以覆蓋整個二維熱圖表面,在BitmapFill屬性中設置位圖圖像,BitmapFill屬性具有垂直和水平鏡像圖像的子屬性。

啓用FullInterpolation屬性來在填充中使用增強的插值方法,請注意這將導致更多的CPU和GPU使用。通過使用全插值,填充質量更好,但只有當數據數組大小相當小時才能看到填充質量。

等高線

等高線:登高線可以與填充和線框屬性一起使用,通過設置ContourLineType屬性,可以繪製不同樣式的等高線:

  • None:沒有等高線顯示。
  • FastColorZones:線條在調色板步驟末端繪製爲細區域,允許非常強大的渲染,這非常適合連續更新或動畫表面。陡峭的數值變化用細線表示,而平緩的高差用粗線表示。每條線都使用ContourLineStyle.Color定義的相同顏色,區域寬度可以通過FastContourZoneRange屬性設置,該值在y軸範圍內。
  • FastPalettedZones:與FastColorZones類似,但線條着色遵循ValueRangePalette選項。
  • ColorLine:像FastColorZones一樣,但是等高線是實際的線。渲染需要更長的時間,不建議持續更新或動畫2D熱圖表面,線寬可以用ContourLineStyle.Width屬性來調整。
  • 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熱圖應用程序

這個項目的邏輯是基於一個網格型的二維熱圖,如果我們選擇允許觀察線框的選項,將看到每個生成的節點。

圖表控件LightningChart .NET中文教程

最高值將顯示爲紅色,最低值將顯示爲紫色。對於本例,強度範圍內的值與圖像中每個像素的顏色強度成正比。如果您上傳的圖像背景爲黑色,則它將在熱圖中顯示紫色,因爲它是強度範圍中最暗的顏色。

圖表控件LightningChart .NET中文教程

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

圖表控件LightningChart .NET中文教程

LightningChart.NET庫允許我們識別顏色並生成自己的調整來製作漸變層,這有助於我們識別許多研究案例的強度,例如溫度,振動等。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章