概述

迷你图 —— Sparklines是迷你的轻量级图表,有助于快速可视化数据。 它们是由数据可视化传奇人物Edward Tufte发明的,他将其描述为“数据密集,设计简单,字节大小的图形。”虽然迷你图不包含传统图表中的许多元素(如轴和坐标), 基于它们的简单性,它们可以比其他图表类型更具信息性。 由于其紧凑的尺寸,迷你图可以轻松嵌入数据网格或仪表板中,以显示一系列价值观的趋势,例如销售数据、天气或股票市场。

Sparklines in FlexGrid

将迷你图用于数据网格是很常见的,因为它们为表格数据添加了丰富的可视化功能,而不会占用太多空间。 随着ComponentOne 2018 v3的到来,FlexGrid控件提供了在网格列中显示迷你图的功能。 让我们通过一个非常常见的用例来理解这个功能 —— 分析特定月份不同公司的股票趋势。

使用迷你图可视化分析股市趋势

迷你图提供即时趋势信息。 这正是股市分析师所需要的 —— 即时趋势的金融数据。

在上面的示例中,该网格数据显示了2018年10月份不同公司的股票信息,包含最近一周的交易量(过去7天的交易量)、前一周交易量(前7天的交易量)、超过一周的交易量(原始和百分比)以及整个月的交易量趋势。

现在,我们来看看如何在FlexGrid中实现它。

创建迷你图表

绑定到数据源

将FlexGrid绑定到包含表示数字集合的字段的数据源。 例如,实现IEnumerable或INotifyCollectionChanged接口的字段,如Array,List或ObservableCollection。

我们将网格绑定到一个包含以下内容的数据源:有关最新周交易量、前一周交易量、两者之间的变化和百分比变化的信息,以及10月份不同公司的交易量数字集合。

一旦绑定了数据网格,就可以深入探索我们需要使用的属性,以便在FlexGrid中显示迷你图。

使用ShowSparkline和Sparkline属性

引入了Column类的ShowSparkline和Sparkline属性,以便在集合所代表的数据的相应单元格中显示迷你图。 因此,为了可视化一个月交易量的趋势,只需将列的ShowSparkline属性设置为true,如图所示。

Column volumeTrendCol = c1FlexGrid1.Cols["VolumeValues"];
volumeTrendCol.Caption = "Volume Trend Last 31 days\n as of 31-10-2018";
//Set the Column's ShowSparkline property to true to show sparklines in that column
volumeTrendCol.ShowSparkline = true;

您可以选择三种不同类型的迷你图,即Column,Line和WinLoss,以便在不同的上下文中可视化数据。

线条迷你图、列迷你图和WinLoss迷你图

例如,线条迷你图适用于可视化连续数据,例如销售数据。 列迷你图用于涉及数据比较的场景,例如,比较特定年份的月利润。同样,WinLoss迷你图最好用于可视化真假判断(即取得胜利)场景,例如,跟踪体育赛季。

在这里,由于我们有连续数据(一个月的交易量),因此我们将使用线型迷你线。 为了设置sparkline类型,您需要使用Column类的Sparkline属性检索Sparkline对象。

然后,将检索到的对象的SparklineType属性设置为SparklineType.Line。 您还可以使用标记突出显示迷你图上的各个数据点,以使其更具可读性。 例如,要突出显示迷你图中的最高和最低交易量值,请将Sparkline类的ShowHigh和ShowLow属性设置为true,如下所示:

//Sets the type of Sparkline
volumeTrendCol.Sparkline.SparklineType = SparklineType.Line;
//Highlight the highest and the lowest data points
volumeTrendCol.Sparkline.ShowHigh = true;
volumeTrendCol.Sparkline.ShowLow = true;

您还可以使用不同的样式选项更改迷你图的外观。

Sparklines的样式

FlexGrid控件的命名空间[C1.Win.C1FlexGrid]提供了一个名为SparklineStyles的类,它可以自定义Sparkline的外观,例如轴的颜色、数据点的颜色、迷你图主题颜色等。 此外,还可以更改迷你图轴距、不同系列图距、 winloss迷你图中两条线之间的距离,以及迷你图中线条的粗细。

点击此处,下载示例Demo,您可以亲自尝试一下 ComponentOne 迷你图。


ComponentOne Enterprise | 下载试用

ComponentOne是一款专注于企业应用高性能开发的 .NET 全功能控件套包,包含300余种控件,支持7大平台,涵盖7大功能模块。较于市面上其他同类产品,ComponentOne更加轻盈,功能更加强大,20多年的开发经验,将为您的应用系统带来更为安全的使用体验。纯中文操作界面,一对一技术支持,厂商级的技术服务,共同造就了这款国际顶级控件套包。

您对ComponentOne 产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>> 技术支持论坛

【Visual Studio 扩展工具】使用 ComponentOne迷你图控件,进行可视化数据趋势分析的更多相关文章

  1. 【Visual Studio 扩展工具】如何在ComponentOneFlexGrid树中显示RadioButton

    概述 在ComponentOne Enterprise .NET控件集中,FlexGrid表格控件是用户使用频率最高的控件之一.它是一个功能强大的数据管理工具,轻盈且灵动,以分层的形式展示数据(数据呈 ...

  2. 【Visual Studio 扩展工具】如何在ComponentOne的DataTree中实现RightToLeft布局

    概述 C1FlexGrid提供了创建轮廓树的功能,其中可以显示缩进结构,每个节点行旁边都有折叠/展开图标. 然后,用户可以展开和折叠轮廓以查看所需的细节级别. 为此,C1FlexGrid允许您使用其T ...

  3. 【Visual Studio 扩展工具】使用ComponentOne中的GroupDefinition和SortDefinition属性保存和还原布局

    概述 在此前的ComponentOne中,我们为C1FlexGrid(最快,最灵活的.Net数据网格控件)添加了一个非常强大的动态分组功能,这篇技术博客<将动态分组添加到.NET表格控件Flex ...

  4. Visual Studio 2010下ASPX页面的TreeView控件循环遍历

    如果维护一个老系统就总会遇到各种问题,而这次是TreeView的循环遍历.对于Visual Studio2010上aspx页面的TreeView控件,我感受到了什么叫集微软之大智慧.与二叉树型不一样. ...

  5. Visual studio 扩展工具

  6. Visual Studio C#的winform/webform/asp.net控件命名规范

    控件命名规范 类型 前缀 示例 AdRotator adrt adrtTopAd Button btn btnSubmit Calendar cal calMettingDates CheckBox ...

  7. Visual studio之C#跨线程调用UI控件

    背景 当前串口通讯项目,多个线程需要同时利用richTextBoxMsg控件打印信息,直接调用会造成线程不安全,严重的时候会直接导致UI线程挂掉,因此本篇就跨线程调用UI控件做个记录. 正文 定义控件 ...

  8. Visual Studio 扩展包(.vsix)制作

    前言:上篇介绍了 Visual Studio扩展工具添加与卸载,本编要介绍的是Visual Studio 扩展包(.vsix)的制作. 方法: ①.下载并安装Visual Studio 2010 SD ...

  9. visual studio开发工具的C#主流控件属性一览表

    visual studio开发工具的C#主流控件属性一览表 详细的介绍了各控制属性的详细中文介绍 C#控件及常用设计整理 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程 ...

随机推荐

  1. VS开发入门一:VS常用快捷键大全,工欲善其事必先利其器 只看标红的吧

    1.快速using(这个的快捷键是ctrl+.)2.快速回到之前编辑的代码页面现在的项目动不动就几十个代码页面,经常需要在几个页面之间跳来跳去,这时就需要这两个快捷键:CTRL + - 向后定位,回到 ...

  2. stm32f769ni-discovery编译例程需要修改

    找不到cmsis_os.h: 方法:在pack文件夹下找cmsis_os.h文件,有四个,选RTOS2文件夹下的. 原因:cmsis_os2.h是新版本,cmsis_os.h封装了cmsis_os2. ...

  3. 基础SQL注入

    预备知识对mysql数据库有一定了解:对基本的sql语句有所了解:对url编码有了解:空格=‘%20’,单引号=‘%27’,双引号=‘%22’,井号=‘%23’等 基本步骤1. 判断是什么类型注入,有 ...

  4. Ubuntu 使用命令行连接无线网

    一.查看可以使用的无线网: nmcli dev wifi 二.连接无线网: nmcli dev wifi connect ‘essid’(网络名称) password ‘password’(密码) 可 ...

  5. 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别

    JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...

  6. k-means性能测试

    clf = MiniBatchKMeans(n_clusters=5000, batch_size=5000, n_init=1, max_iter=200, max_no_improvement=1 ...

  7. int 的重载

    测试代码: 结果: 分析: 首先创建两个对象同时进行初始化所以两次调用带参的构造函数: 其次在创建一个 对象然后将其等于前两个对象相加,这里由于该类没有重载+运算符而是重载了int 所以当两个对象相加 ...

  8. Software Testing 2 —— Fault、error and failure小练习

    Questions: Below are two faulty programs. Each includes a test case that results in failure. Answer ...

  9. C#串口通信遇到的坑

    C#串口通信中有一个DataReceived事件可以委托一个接收函数.此接收函数是运行在辅线程(secondary thread)上的.如果要在这个函数中修改主线程中的一些元素,比如UI界面上的变量的 ...

  10. 改变FileUpload文件上传控件的显示方式,选择文件后自动上传

    一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="File ...