【Visual Studio 擴展工具】使用 ComponentOne迷你圖控件，進行可視化數據趨勢分析

概述

迷你圖 —— 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 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; //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專業解答，點擊此處便可發帖提問>> 技術支持論壇