「实战应用」如何用图表控件LightningChart .NET在WPF中制作表格？（二）

devtools/2024/11/16 21:44:56/

LightningChart .NET完全由GPU加速，并且性能经过优化，可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D，高级3D，Polar，Smith，3D饼/甜甜圈，地理地图和GIS图表以及适用于科学，工程，医学，航空，贸易，能源和其他领域的体绘制功能。

立即申请LightningChart .NET试用

在上文中（点击这里回顾>>），我们为大家介绍了什么是 LightningChart 的WPF图表以及基本的项目概况和设置等，本文将详细介绍如何来创建WPF图表。

系列设置

我们将打造5大系列：

string[] cityNames = new string[] { "Paris", "New York City", "Tokyo", "Helsinki", "Buenos Aires" };
Color[] cityColors = new Color[] { Colors.LimeGreen, Colors.LightCoral, Colors.RoyalBlue, Colors.Green, Colors.Turquoise };

城市名称和城市颜色将存储在数组对象中，因为它们将在循环中进行映射：

for (int i = 0; i < _dataRowCount; i++)
{
PointLineSeries temperatureSeries = new PointLineSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], yAxisTemperature);
temperatureSeries.LineStyle.Color = cityColors[i];
temperatureSeries.PointsVisible = false;
temperatureSeries.PointStyle.Color1 = Color.FromArgb(0, 0, 0, 0);
temperatureSeries.PointStyle.Color2 = cityColors[i];
_chart.ViewXY.PointLineSeries.Add(temperatureSeries);
temperatureSeries.Points = CreateRandomTemperatureData(101, i * 5);

点线系列基本上是笛卡尔平面中每个数据点的表示，这些点将根据其 X 和 Y 值相对于 X 轴和 Y 轴进行定位。这些点可以用线连接起来，这样我们就可以得到一条带有峰值的线：

「实战应用」如何用图表控件<a class=LightningChart .NET在WPF中制作表格？" height="276" src="https://img-blog.csdnimg.cn/img_convert/68838dd41872597ae94e0bdf6110862f.jpeg" width="581" />

数据应该被格式化为一个数组，该数组将使用方法CreateRandomTemperatureData和CreateRandomHumidityData。

PointLineSeries humiditySeries = new PointLineSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], yAxisHumidity);
humiditySeries.LineStyle.Color = cityColors[i];
humiditySeries.PointsVisible = true;
humiditySeries.PointStyle.Color1 = HumidityColor;
humiditySeries.PointStyle.Color2 = Color.FromArgb(0, 0, 0, 0);
humiditySeries.PointStyle.Shape = Shape.Rectangle;
humiditySeries.PointStyle.Angle = 45;
_chart.ViewXY.PointLineSeries.Add(humiditySeries);
humiditySeries.Points = CreateRandomHumidityData(101, i * 10);

第一点线系列和第二点线系列之间的主要区别在于，我们对温度系列使用 Y 温度轴，对湿度系列使用 Y 湿度轴。

创建数据点
private SeriesPoint[] CreateRandomTemperatureData(int pointCount, double seedOffsetLevel)
{
Random random = new Random((int)seedOffsetLevel);
double value = seedOffsetLevel;
SeriesPoint[] data = new SeriesPoint[pointCount];
for (int i = 0; i < pointCount; i++)
{
data[i].X = i;
value += (random.NextDouble() - 0.5) * 3;
data[i].Y = value;
}
return data;
}

对于此示例，我们使用一个简单的循环来创建随机数据点。如您所见，数据点只需要 X 和 Y 值，这些点必须包含在每个轴的范围内。

CreateAnnotationsTable()

这是在 WPF 中创建表格的方法，它将在图表上创建并显示注释表：

「实战应用」如何用图表控件<a class=LightningChart .NET在WPF中制作表格？" height="360" src="https://img-blog.csdnimg.cn/img_convert/bfdfb4fc4c88fe8abafceed434ef3110.jpeg" width="732" />

参数包括cityNames、cityColors、width和height。

private void CreateAnnotationsTable(string[] cityNames, Color[] cityColors, float width, float height)
{

通过这些参数，我们将指定表格的大小、行数和颜色。要创建调整大小的边框，需要允许与用户交互、允许调整大小功能和其他视觉属性：

AnnotationXY resizingBorder = CreateCell();
resizingBorder.AllowUserInteraction = true;
resizingBorder.AllowResize = true;
resizingBorder.AllowDragging = false;
resizingBorder.Fill.Style = RectFillStyle.None;
resizingBorder.Shadow.Visible = false;
resizingBorder.ResizedByUser += resizingBorder_ResizedByMouse;
resizingBorder.TextStyle.Visible = false;
resizingBorder.SizeScreenCoords.SetValues(width, height);
resizingBorder.Highlight = Highlight.None;
resizingBorder.BorderLineStyle.Width = 3;

SizeScreenCoords将帮助我们设置表格的默认大小，ResizedByUser将根据用户更新表格的大小：

private void resizingBorder_ResizedByMouse(object sender, AnnotationResizedByUserXYEventArgs e)
{
AnnotationXY border = (AnnotationXY)sender;
RepositionAnnotationsTable(border.LocationScreenCoords.X, border.LocationScreenCoords.Y,
border.SizeScreenCoords.Width, border.SizeScreenCoords.Height);
}

所有这些属性都将存储在AnnotationXY对象中，此对象将包含边框、标题、行和列。标题是单元格，我们只需按需要的顺序添加它们：

「实战应用」如何用图表控件<a class=LightningChart .NET在WPF中制作表格？" height="132" src="https://img-blog.csdnimg.cn/img_convert/0011a80140efd6d12da98bfe23837dbe.jpeg" width="650" />

AnnotationXY header = CreateCell();
header.TextStyle.Font = new WpfFont("Serif", 20.0, "20", true, false);
header.TextStyle.Color = Colors.White;
header.TextStyle.Shadow.Style = TextShadowStyle.DropShadow;
header.Text = "Weather data";
header.Fill.Style = RectFillStyle.ColorOnly;
header.Fill.Color = Color.FromArgb(180, 255, 255, 0);
header.Fill.GradientColor = Color.FromArgb(180, 200, 200, 0);
header.Fill.GradientFill = GradientFill.Linear;
header.AllowUserInteraction = true;
header.AllowDragging = true;
header.DraggedByUser += header_MovedByMouse;
//Column titles - City
AnnotationXY columnTitle1 = CreateCell();
columnTitle1.TextStyle.Font = new WpfFont("Serif", 15.0, "15", true, false);
columnTitle1.TextStyle.Color = Colors.White;
columnTitle1.Text = "City";
columnTitle1.Fill.Style = RectFillStyle.ColorOnly;
columnTitle1.Fill.Color = Colors.Gray;
columnTitle1.TextStyle.HorizAlign = AlignmentHorizontal.Left;

所有属性都与 CSS 属性非常相似，所以我认为没有必要全部解释。该CreateCell函数将向单元格添加更多属性，单元格的颜色将从轴中获取。

为了创建行，我们需要使用循环创建更多单元格：

for (int row = 0; row < cityCount; row++)
{
//Row title
AnnotationXY cityTitle = CreateCell();
cityTitle.TextStyle.Font = new WpfFont("Serif", 12.0, "12", true, true);
cityTitle.TextStyle.Color = Colors.White;
cityTitle.Text = cityNames[row];
cityTitle.Fill.Color = cityColors[row];
cityTitle.Fill.Style = RectFillStyle.ColorOnly;
cityTitle.TextStyle.HorizAlign = AlignmentHorizontal.Left;
//Data cells
for (int dataCol = 0; dataCol < dataColumnsPerCity; dataCol++)
{
AnnotationXY data = CreateCell();
data.TextStyle.Font = new WpfFont("Serif", 12.0, "12", false, false);
data.TextStyle.Color = Colors.White;
data.Text = "N/A";
}
}

对于每个城市，将创建一个单元格，数据columnsPerCity在代码开头指定。

「实战应用」如何用图表控件<a class=LightningChart .NET在WPF中制作表格？" height="218" src="https://img-blog.csdnimg.cn/img_convert/da0f5e989b54a3ab4425f4ba95aa5d8d.jpeg" width="221" />

我们指定了值 2，这样我们就有两列按城市划分的列：

「实战应用」如何用图表控件<a class=LightningChart .NET在WPF中制作表格？" height="212" src="https://img-blog.csdnimg.cn/img_convert/bb3f83466a62804d2602576422bffa7c.jpeg" width="466" />

向表中添加数据

表将需要一个包含每列两个值的对象，在这种情况下我们将使用元组，元组有助于形成由“行”组成的多个部分的数据结构：

Tuple<double, double>[] data = new Tuple<double, double>[5];
data[0] = new Tuple<double, double>(8, 24);
data[1] = new Tuple<double, double>(10, 45);
data[2] = new Tuple<double, double>(20, 12);
data[3] = new Tuple<double, double>(-15, 5);
data[4] = new Tuple<double, double>(40, 68);
UpdateTableData(data);

「实战应用」如何用图表控件<a class=LightningChart .NET在WPF中制作表格？" height="212" src="https://img-blog.csdnimg.cn/img_convert/9bf1496d9131273e5e291630be89dda1.jpeg" width="466" />

该方法UpdateTableData 将帮助我们将每个值添加到AnnotationXY对象中，通过这种方式，您可以实现一种创建具有更新值的元组的方法。

_chart.BeginUpdate();
for (int iCity = 0; iCity < _dataRowCount; iCity++)
{
double tempature = data[iCity].Item1;
AnnotationXY cellTemperature = _chart.ViewXY.Annotations[5 + iCity * 3 + 1];
cellTemperature.Text = tempature.ToString() + " °C";
if (tempature < 0)
{
cellTemperature.TextStyle.Color = Colors.LightBlue;
}
else if (tempature < 20)
{
cellTemperature.TextStyle.Color = Colors.White;
}
else
{
cellTemperature.TextStyle.Color = Colors.Red;
}
AnnotationXY cellHumidity = _chart.ViewXY.Annotations[5 + iCity * 3 + 2];
cellHumidity.Text = data[iCity].Item2.ToString() + " %";
}
_chart.EndUpdate();

该方法将格式化值，给出与温度相关的颜色，定位相应单元格的方法基本上是计算单元格数量并添加城市行。

_chart.EndUpdate();
gridChart.Children.Add(_chart);

一旦我们完成图表配置，就关闭EndUpdate()更新过程，并将图表对象添加到 XAML 网格中以便显示它。

结论

注释乍一看可能有点令人困惑，尤其是需要配置其视觉属性的所有代码。但好消息是：LightningChart .NET允许您以与使用 CSS 类进行样式设置非常相似的方式自定义这些注释。

有一件事可能会让您感到困惑，那就是表格的创建方式——但别担心，它比看起来要简单！将注释视为一个框或单元格，有点像 CSS 和 HTML 中的“DIV”。在这个单元格内，您可以添加所需的文本和信息。

要在 WPF 中创建表格，您只需创建一组单元格，所有单元格都整齐地排列在一个框架内，以使内容井井有条。设置表格后，只需使用文本属性为其分配值即可。您可以使用填充颜色、边框、文本、字体类型、字体大小等对其进行自定义。

调整大小和表更新函数的工作方式与可以应用于任何 .NET 项目的常规函数类似。因此，如果您希望在 WPF 中为您的项目实现注释或表，本练习将为您提供专注于数据源所需的工具。

即使是创建线系列，您也可以将此代码用于其他项目。逻辑保持不变；只有数据范围、颜色和标签会发生变化。

希望本次教程对您即将开展的项目有所帮助。


http://www.ppmy.cn/devtools/134529.html

相关文章

pyinstaller+upx给python GUI程序添加自定义图标

pyinstaller+upx给python GUI程序添加自定义图标

一、在线.ico图标生成 windows用48x48尺寸 https://www.ico51.cn/ 二、upx打包图标工具 https://upx.github.io/ 三、UI文件生成py代码 pyside2-uic window.ui > window.py 四、打包命令 1、–icon&#xff1a;这个是.ico图标路径 2、–upx-dir&#xff1a;upx打包工…
阅读更多...
uniapp中多角色导致tabbar过多的解决方式

uniapp中多角色导致tabbar过多的解决方式

由于项目时间较紧张&#xff0c;找了很多却没找到特别合适的方法&#xff0c;最后使用了此方式。 一、自己封装tabbar组件 这里就不介绍怎么封装了&#xff0c;先说一下缺点&#xff1a; 1.跳转会有白屏问题&#xff08;并且搜了好多资料以及查看官网发现没有特别合适的方法…
阅读更多...
求字符 ‘a‘ 和 ‘b‘ 组成的，最大长度为n的字符串中字典序第 k 个字符串

求字符 ‘a‘ 和 ‘b‘ 组成的，最大长度为n的字符串中字典序第 k 个字符串

求字符 ‘a’ 和 ‘b’ 组成的&#xff0c;最大长度为n的字符串中字典序第 k 个字符串 先来解释一下这个题目&#xff0c;假设最大长度为3&#xff0c;那么由字符a和b组成的字符串有&#xff1a; a, b, ab, aaa, aba...把这些字符串按照字典序排序: aaaaaaaabababaabbbbabaab…
阅读更多...
一文1800字使用Jmeter进行http接口性能测试！

一文1800字使用Jmeter进行http接口性能测试！

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 为什么要做接口测试&#xff1f; 越底层发现b…
阅读更多...
EXPLAIN优化慢SQL

EXPLAIN优化慢SQL

项目中发现数据查询很慢&#xff0c;导致前端超时等待的问题。经过日志打印发现&#xff0c;查询sql耗时10秒以上&#xff0c;相关sql如下&#xff1a; select distincttablemodel.*from pjtask_model tablemodelJOIN buss_type_permission a ON (tablemodel.fields_data_id …
阅读更多...
【分布式】CAP理论

【分布式】CAP理论

CAP定理的核心要点&#xff1a; CAP定理指出&#xff0c;任何一个分布式系统在面对网络分区&#xff08;Partition&#xff09;的情况下&#xff0c;最多只能同时满足以下三个特性中的两个&#xff1a; 一致性&#xff08;Consistency&#xff09;&#xff1a; 所有节点在同一…
阅读更多...
VS2022编译32位OpenCV

VS2022编译32位OpenCV

使用环境 Visual Studio 2022 OpenCV: 4.7.0 cmake: 3.30.2一、使用CMake工具生成vs2022的openCV工程解决方案 打开cmake&#xff0c;选择opencv的源代码目录&#xff0c;创建一个文件夹&#xff0c;作为VS工程文件的生成目录 点击configure构建项目&#xff0c;弹出构建设置…
阅读更多...
MySQL --- 自定义函数获取部门层级名称

MySQL --- 自定义函数获取部门层级名称

介绍 使用MySQL自定义函数&#xff0c;获取当前部门及上级所有部门的名称。 示例代码 向自定义函数传入子级部门id&#xff0c;自定义函数返回&#xff0c;子级部门名称及上级所有层级部门名称&#xff0c;以" / "分隔符分割。 &#xff08;1&#xff09;创建自定…
阅读更多...
最新文章

Copyright @ 2022~2023