數據可視化控件——大事記控件

概述

業務工做中不少場景須要對數據進行可視化展示，爲知足用戶需求，提高用戶體驗，咱們開發了較多數據可視化控件。現逐一介紹給你們，造成一個系列。

今天要介紹的是大事記控件VerticalTimeLine，該控件按年對一系列事件進行分段展現，點擊年份標記，本年度的大事會進行收縮，再次點擊會展開。

使用方式

1.拖放控件到窗體中；

2.增長窗體加載事件。

List<EventItem> items = new List<EventItem>();

items.Add(new EventItem(new DateTime(2012,9,10), true, "發佈全新的極速瀏覽器6.0版本", "升級極速內核到21.0；全新默認界面；新增小窗口播放功能"));

 items.Add(new EventItem(new DateTime(2012, 9, 10), false, "升級極速內核到20.0", "HTML5支持度全球最好，達到469分，測試頁面："));

 items.Add(new EventItem(new DateTime(2012, 9, 10), false, "升級極速內核到19.0", "支持網絡攝像頭，瀏覽器可直接訪問攝像頭"));

 items.Add(new EventItem(new DateTime(2011, 9, 10), false, "發佈國內首個HTML5實驗室", "大力推廣HTML5"));

 items.Add(new EventItem(new DateTime(2011, 9, 10), true, "新增了下載文件前掃描下載連接安全性的功能", ""));

 items.Add(new EventItem(new DateTime(2010, 9, 10), false, "W3C聯盟首席執行官訪華，首站訪問360公司", ""));

 items.Add(new EventItem(new DateTime(2010, 9, 10), true, "360受邀出席W3C聯盟成員見面會議", ""));

 items.Add(new EventItem(new DateTime(2010, 9, 10), false, "升級極速內核到18.0", "新增多用戶使用瀏覽器的功能"));

 items.Add(new EventItem(new DateTime(2010, 9, 10), true, "發佈全新的極速瀏覽器6.0版本", "升級極速內核到21.0；全新默認界面；新增小窗口播放功能"));

 verticalTimeLine11.EventItems = items;

 verticalTimeLine11.RefreshEvents();

3.編譯運行便可。

原理介紹

1. 事件定義：

public class EventItem

    {

        public DateTime TimeStamp { get; set; }

        public bool IsImportantNode { get; set; }

        public string Title { get; set; }

        public string Detail { get; set; }

        public EventItem(DateTime timeStamp, bool isImportant, string title, string detail)

        {

            TimeStamp = timeStamp;

            IsImportantNode = isImportant;

            Title = title;

            Detail = detail;

        }

    }

2.事件展現：

內嵌瀏覽器控件，將事件序列轉換成HTML，與模板文件融合，使用瀏覽器控件展現。

源碼

https://github.com/njuxdj/DataVisual.Controls