CN110704529A - 基于LiveChart实现可交互带缩略图时间轴的方法 - Google Patents

基于LiveChart实现可交互带缩略图时间轴的方法 Download PDF

Info

Publication number
CN110704529A
CN110704529A CN201910950912.8A CN201910950912A CN110704529A CN 110704529 A CN110704529 A CN 110704529A CN 201910950912 A CN201910950912 A CN 201910950912A CN 110704529 A CN110704529 A CN 110704529A
Authority
CN
China
Prior art keywords
data
livechart
setting
cartesian
thumbnail
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201910950912.8A
Other languages
English (en)
Inventor
郑楷洪
肖勇
赵云
钱斌
周密
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
CSG Electric Power Research Institute
China Southern Power Grid Co Ltd
Research Institute of Southern Power Grid Co Ltd
Original Assignee
China Southern Power Grid Co Ltd
Research Institute of Southern Power Grid Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by China Southern Power Grid Co Ltd, Research Institute of Southern Power Grid Co Ltd filed Critical China Southern Power Grid Co Ltd
Priority to CN201910950912.8A priority Critical patent/CN110704529A/zh
Publication of CN110704529A publication Critical patent/CN110704529A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/26—Visual data mining; Browsing structured data
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/24—Querying
    • G06F16/245—Query processing
    • G06F16/2458—Special types of queries, e.g. statistical queries, fuzzy queries or distributed queries
    • G06F16/2474—Sequence data queries, e.g. querying versioned data
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Fuzzy Systems (AREA)
  • Mathematical Physics (AREA)
  • Probability & Statistics with Applications (AREA)
  • Software Systems (AREA)
  • Computational Linguistics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了基于LiveChart实现可交互带缩略图时间轴的方法，利用WPF基础技术对数据源进行访问并获取数据，将数据整理为数据集格式，新建ViewModel，将ChartValues设置为提供可绑定的数据来源，并设置主图需要展示数据的时间段对应的两个起止时间点属性，新建WPF窗口，引入CartesianChart，绑定ChartValues，给CartesianChart设置对应的数据展示区间。本发明可快速生成可以交互的时间轴的应用，拖动时间轴的时候，第一个图表会随着滚轮左右滚动，当滚动鼠标中间滑轮的时候，可动态缩放显示范围。

Description

基于LiveChart实现可交互带缩略图时间轴的方法
技术领域
本发明涉及Net WPF开发技术领域，特别是涉及基于LiveChart实现可交互带缩略图时间轴的方法。
背景技术
数据可视化，是关于数据视觉表现形式的科学技术研究，主要是借助于图形化手段，清晰有效地传达与沟通信息。
目前，大数据的可视化已经不仅仅满足于简单的数据的静态展示，而是越来越倾向于可以交互操作的可视化，时间轴是一种很高效的可视化表达方式，不仅可以很直观的展示数据或者重大事件等，还能通过鼠标拖拽、滚轮等操作在有限的固定的屏幕范围内对数据的展示做更多的延展。
LiveCharts是微软WPF开发平台的可视化图表库，利用它可以实现很多数据可视化功能；不过，LiveCharts虽然提供了底层鼠标操作的API，但是并没有针对带缩略图的时间轴提供基本的开发架构。
发明内容
本发明提供的基于LiveChart实现可交互带缩略图时间轴的方法，可快速生成可交互带缩略图的时间轴的应用，加强了数据可视化功能。
本发明的目的，可以通过如下技术方案实现：
基于LiveChart实现可交互带缩略图时间轴的方法，包括如下步骤：
步骤1：对数据源进行访问并获取数据，将所述数据转换为LiveCharts要求的数据集，其中，所述数据源为二维表数据，第一列为时间，第二列为对应的数据值；
步骤2：新建ViewModel，设置两个LineSeries，在ViewModel里将ChartValues设置为可绑定的数据来源，并设置需要展示数据的时间段对应的起止时间点属性；
步骤3：新建WPF窗口，设置两个CartesianChart；
步骤4：将所述两个LineSeries的数据源绑定为所述数据集；
步骤5：为所述两个CartesianChart设置数据展示区间。
可选的，将所述数据转换为LiveCharts要求的数据集进一步包括如下步骤：
步骤11：读取所述数据；
步骤12：循环数据内容，新增DateTimePoint，在其构造函数中传入每一数据的第一列的值和第二列的值；
步骤13：将DateTimePoint加入到所述数据集。
可选的，新建ViewModel，设置两个LineSeries，将ChartValues设置为可绑定的数据来源，并设置主图需要展示数据的时间段对应的起止时间点，进一步包括：
新增Start和End两个依赖属性，数据值可以默认设置为ChartValues中的所有日期中的某两个日期对应的Ticks值。
可选的，将两个所述CartesianChart设置为与LineSeries对应的数据展示区间进一步包括如下步骤：
步骤51：将第一个图表LineSeries的最小值和最大值分别绑定Start和End属性；
步骤52：将第二个图表LineSeries滚动模式设置为X，并将滚动条的起止属性分别绑定为Start和End属性。
可选的，新建WPF窗口，设置两个CartesianChart进一步包括如下步骤：
步骤31：新建WPF窗口，其DataContext设置为步骤2的所述ViewModel；
步骤32：引入两个CartesianChart，每个CartesianChart都放入一个LineSeries类型的Series；
步骤33：将第二个LineSeries的横坐标与纵坐标设置为隐藏。
可选的，新建WPF窗口，设置两个CartesianChart进一步包括，其中，第一个CartesianChart作为主图用于展示详细数据。
可选的，新建WPF窗口，设置两个CartesianChart进一步包括，其中，第二个CartesianChart作为缩略图用于拖拽操作。
可选的，对数据源进行访问并获取数据之前还包括，初始化所述数据源，所述数据源包括一个或多个数据。
可选的，所述数据源可以为Excel文件、JSON文件和数据库中的一种或多种。
本发明公开了基于LiveChart实现可交互带缩略图时间轴的方法，利用WPF基础技术对数据源进行访问并获取数据，将数据整理为数据集格式，新建ViewModel，将ChartValues设置为提供可绑定的数据来源，并设置主图需要展示数据的时间段对应的两个起止时间点属性，新建WPF窗口，引入CartesianChart，绑定ChartValues，给CartesianChart设置对应的数据展示区间。本发明可快速生成可以交互的时间轴的应用，拖动时间轴的时候，第一个图表会随着滚轮左右滚动，当滚动鼠标中间滑轮的时候，可动态缩放显示范围。
附图说明
图1为本发明的基于LiveChart实现可交互带缩略图时间轴的方法的流程图；
图2为本发明实施例的基于LiveChart实现可交互带缩略图时间轴的方法的数据来源样本；
图3为本发明实施例的基于LiveChart实现可交互带缩略图时间轴的方法的最终效果图，其中，第一个图表的横坐标为日期，纵坐标为销售额，单位为万元。
具体实施方式
为了便于理解本发明，下面将参照相关附图对本发明进行更全面的描述。附图中给出了本发明的首选实施例。但是，本发明可以以许多不同的形式来实现，并不限于本文所描述的实施例。相反地，提供这些实施例的目的是使对本发明的公开内容更加透彻全面。
除非另有定义，本文所使用的所有的技术和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同。本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本发明。本文所使用的术语“及/或”包括一个或多个相关的所列项目的任意的和所有的组合。
如图1和图2所示，本实施例提供的基于LiveChart实现可交互带缩略图时间轴的方法，利用WPF基础技术对数据源进行访问，并获取数据，将数据整理为数据集格式，新建ViewModel，将ChartValues设置为提供可绑定的数据来源，并设置主图需要展示数据的时间段对应的两个起止时间点属性，新建WPF窗口，引入CartesianChart，绑定ChartValues，给CartesianChart设置对应的数据展示区间，具体包含以下步骤：
步骤100：准备一份二维表数据作为数据源，第一列为日期，第二列为对应的数据值；
准备一份二维表数据作为数据源，数据源的来源方式不限制，数据源的格式不限，可以为Excel、JSON文件、数据库等；
从数据来源中提取出本实施例所需要的二维表，该二维表的第一列为销售日期，第二列为销售日期所对应的销售额。
步骤200：利用WPF基础技术对步骤1提到的数据源访问并获取到数据，将数据整理为LiveCharts要求的数据集；
首先，对数据源进行访问并读取数据；
然后，循环数据内容，新增DateTimePoint实例，在其构造函数中传入每一个数据的第一列的数值即销售日期和第二列的数值即对应日期的销售额；
最后，将DateTimePoint实例加入到数据集。
步骤300：新建ViewModel，设置两个LineSeries，在ViewModel里将ChartValues设置为提供可绑定的数据来源，并设置主图需要展示数据的时间段对应的两个起止时间点属性；
新建ViewModel，在ViewModel里将ChartValues设置为提供可绑定的数据来源；
新增Start和End两个依赖属性，数据值可以默认设置为ChartValues中的所有日期中的某两个日期对应的Ticks值。
步骤400：新建WPF窗口，引入两个CartesianChart；第一个CartesianChart作为主图用于展示详细数据，第二个CartesianChart作为缩略图用于拖拽操作；
新建WPF窗口，其DataContext设置为步骤300的ViewModel；
引入两个CartesianChart，每个CartesianChart都放入一个LineSeries类型的Series；第一个CartesianChart作为主图用于展示详细数据，第二个CartesianChart作为缩略图用于拖拽操作；
将第二个LineSeries的横坐标与纵坐标设置为隐藏。
步骤500：给两个LineSeries的数据源都绑定为所述数据集；
步骤600：给两个CartesianChart设置对应的数据展示区间。
在步骤600中，将第一个图表LineSeries的最小值和最大值分别绑定Start和End属性；
将第二个图表LineSeries滚动模式设置为X，并将滚动条的起止属性分别绑定为Start和End属性。
综上所述，在本实施例中，本实施例提供的基于LiveChart实现可交互带缩略图时间轴的方法，可快速生成可以交互的时间轴的应用，拖动时间轴的时候，第一个图表会随着滚轮左右滚动，当滚动鼠标中间滑轮的时候，可动态缩放显示范围。
以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (9)

1.基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，包括如下步骤：
步骤1：对数据源进行访问并获取数据，将所述数据转换为LiveCharts要求的数据集，其中，所述数据源为二维表数据，第一列为时间，第二列为对应的数据值；
步骤2：新建ViewModel，设置两个LineSeries，在ViewModel里将ChartValues设置为可绑定的数据来源，并设置需要展示数据的时间段对应的起止时间点属性；
步骤3：新建WPF窗口，设置两个CartesianChart；
步骤4：将所述两个LineSeries的数据源绑定为所述数据集；
步骤5：为所述两个CartesianChart设置数据展示区间。
2.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，将所述数据转换为LiveCharts要求的数据集进一步包括如下步骤：
步骤11：读取所述数据；
步骤12：循环数据内容，新增DateTimePoint，在其构造函数中传入每一数据的第一列的值和第二列的值；
步骤13：将DateTimePoint加入到所述数据集。
3.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，新建ViewModel，设置两个LineSeries，将ChartValues设置为可绑定的数据来源，并设置主图需要展示数据的时间段对应的起止时间点，进一步包括：
新增Start和End两个依赖属性，数据值可以默认设置为ChartValues中的所有日期中的某两个日期对应的Ticks值。
4.如权利要求3所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，将两个所述CartesianChart设置为与LineSeries对应的数据展示区间进一步包括如下步骤：
步骤51：将第一个图表LineSeries的最小值和最大值分别绑定Start和End属性；
步骤52：将第二个图表LineSeries滚动模式设置为X，并将滚动条的起止属性分别绑定为Start和End属性。
5.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，新建WPF窗口，设置两个CartesianChart进一步包括如下步骤：
步骤31：新建WPF窗口，其DataContext设置为步骤2的所述ViewModel；
步骤32：引入两个CartesianChart，每个CartesianChart都放入一个LineSeries类型的Series；
步骤33：将第二个LineSeries的横坐标与纵坐标设置为隐藏。
6.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，新建WPF窗口，设置两个CartesianChart进一步包括，其中，第一个CartesianChart作为主图用于展示详细数据。
7.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，新建WPF窗口，设置两个CartesianChart进一步包括，其中，第二个CartesianChart作为缩略图用于拖拽操作。
8.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，对数据源进行访问并获取数据之前还包括，初始化所述数据源，所述数据源包括一个或多个数据。
9.如权利要求1所述的基于LiveChart实现可交互带缩略图时间轴的方法，其特征在于，所述数据源可以为Excel文件、JSON文件和数据库中的一种或多种。
CN201910950912.8A 2019-10-08 2019-10-08 基于LiveChart实现可交互带缩略图时间轴的方法 Pending CN110704529A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910950912.8A CN110704529A (zh) 2019-10-08 2019-10-08 基于LiveChart实现可交互带缩略图时间轴的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910950912.8A CN110704529A (zh) 2019-10-08 2019-10-08 基于LiveChart实现可交互带缩略图时间轴的方法

Publications (1)

Publication Number Publication Date
CN110704529A true CN110704529A (zh) 2020-01-17

Family

ID=69196704

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910950912.8A Pending CN110704529A (zh) 2019-10-08 2019-10-08 基于LiveChart实现可交互带缩略图时间轴的方法

Country Status (1)

Country Link
CN (1) CN110704529A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114117164A (zh) * 2021-11-03 2022-03-01 北京完美知识科技有限公司 一种同时段多个国家政权排布的方法、装置及存储介质

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102591646A (zh) * 2011-12-23 2012-07-18 广东威创视讯科技股份有限公司 一种同时缩放多个wpf窗体的方法和装置
KR101557262B1 (ko) * 2015-03-31 2015-10-13 ㈜지엔피시스템 발전소 모의제어반 hmi 구축을 위한 wpf 형식의 xaml 라이브러리

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102591646A (zh) * 2011-12-23 2012-07-18 广东威创视讯科技股份有限公司 一种同时缩放多个wpf窗体的方法和装置
KR101557262B1 (ko) * 2015-03-31 2015-10-13 ㈜지엔피시스템 발전소 모의제어반 hmi 구축을 위한 wpf 형식의 xaml 라이브러리

Non-Patent Citations (6)

* Cited by examiner, † Cited by third party
Title
LORDWISH: "https://blog.csdn.net/lordwish/article/details/84777090", 《CSDN-WPF随笔（八）--使用LIVECHART创建散点图》 *
LORRE: "https://www.likecs.com/show-47614.html", 《LIVECHART的用法》 *
LVCHARTS: "https://lvcharts.net/App/Examples/v1/Zooming%20and%20panning/wf.html", 《ZOOMING AND PANNING》 *
XSZHOU: "https://www.cnblogs.com/newlifechou/p/8275281.html", 《LIVECHARTS文档-3开始-3类型和设置》 *
啊呀: "https://toscode.gitee.com/ts295983632", 《LIVE-CHARTS》 *
芝麻麻雀: "https://blog.csdn.net/weixin_42930928/article/details/83037822", 《LIVE-CHARTS-简单，灵活，互动和强大的图表》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114117164A (zh) * 2021-11-03 2022-03-01 北京完美知识科技有限公司 一种同时段多个国家政权排布的方法、装置及存储介质

Similar Documents

Publication Publication Date Title
US11561996B2 (en) Continuously scrollable calendar user interface
US10067635B2 (en) Three dimensional conditional formatting
US9335898B2 (en) Single page multi-tier catalog browser
CN103814371B (zh) Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
CN103890727B (zh) Web浏览器中的Web应用和辅助设备的模拟、Web应用开发工具以及使用它们的方法
JP5883648B2 (ja) データ要素間の関係性の視覚化
RU2541216C2 (ru) Двунаправленное обновление grid-таблицы и ассоциированных визуализаций
AU2010241813B2 (en) Platform extensibility framework
US20190065440A1 (en) Adaptable user interface layout
US10289388B2 (en) Process visualization toolkit
US8140581B2 (en) Configurable view on data models
CN110704529A (zh) 基于LiveChart实现可交互带缩略图时间轴的方法
US9984163B2 (en) Self-presenting report
CN114265657A (zh) 一种小程序的页面显示方法及装置
US20220342534A1 (en) Dynamic graphical containers
US20140115503A1 (en) User interface element-based development
US11537413B2 (en) Context framework
CN111782309B (zh) 显示信息的方法、装置及计算机可读存储介质
CN114424188A (zh) 基于书籍的个性化社交媒体服务提供系统及方法
CN110866014A (zh) 一种标准指标数据接入及展示的方法
Sihananto et al. Application of Google Data Studio for Data Visualization at SMK Tunas Bangsa Malang
Verzani Using R in introductory statistics courses with the pmg graphical user interface
Scarsbrook Open-source software for radiologists: a primer
US11127177B2 (en) Technology for generating product designs using multiple canvases
CN115934973A (zh) 一种数据处理方法及其设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20200117