迷你圖 —— Sparklines 是迷你的輕量級圖表，有助于快速可視化數(shù)據(jù)。 它們是由數(shù)據(jù)可視化傳奇人物 Edward Tufte 發(fā)明的，他將其描述為“數(shù)據(jù)密集，設計簡單，字節(jié)大小的圖形。”雖然迷你圖不包含傳統(tǒng)圖表中的許多元素（如軸和坐標）， 基于它們的簡單性，它們可以比其他圖表類型更具信息性。 由于其緊湊的尺寸，迷你圖可以輕松嵌入數(shù)據(jù)網(wǎng)格或儀表板中，以顯示一系列價值觀的趨勢，例如銷售數(shù)據(jù)、天氣或股票市場。

 

Sparklines in FlexGrid

將迷你圖用于數(shù)據(jù)網(wǎng)格是很常見的，因為它們?yōu)楸砀駭?shù)據(jù)添加了豐富的可視化功能，而不會占用太多空間。 隨著 ComponentOne 2018 v3 的到來，F(xiàn)lexGrid 控件提供了在網(wǎng)格列中顯示迷你圖的功能。 讓我們通過一個非常常見的用例來理解這個功能 —— 分析特定月份不同公司的股票趨勢。

 

使用迷你圖可視化分析股市趨勢

迷你圖提供即時趨勢信息。 這正是股市分析師所需要的 —— 即時趨勢的金融數(shù)據(jù)。

 

 

在上面的示例中，該網(wǎng)格數(shù)據(jù)顯示了 2018 年 10 月份不同公司的股票信息，包含最近一周的交易量（過去7天的交易量）、前一周交易量（前7天的交易量）、超過一周的交易量（原始和百分比）以及整個月的交易量趨勢。

 

現(xiàn)在，我們來看看如何在FlexGrid中實現(xiàn)它。

 

創(chuàng)建迷你圖表

綁定到數(shù)據(jù)源

將 FlexGrid 綁定到包含表示數(shù)字集合的字段的數(shù)據(jù)源。 例如，實現(xiàn) IEnumerable 或 INotifyCollectionChanged 接口的字段，如 Array，List 或 ObservableCollection。

 

我們將網(wǎng)格綁定到一個包含以下內容的數(shù)據(jù)源：有關最新周交易量、前一周交易量、兩者之間的變化和百分比變化的信息，以及 10 月份不同公司的交易量數(shù)字集合。

 

一旦綁定了數(shù)據(jù)網(wǎng)格，就可以深入探索我們需要使用的屬性，以便在 FlexGrid 中顯示迷你圖。

 

使用 ShowSparkline 和 Sparkline 屬性

引入了 Column 類的 ShowSparkline 和 Sparkline 屬性，以便在集合所代表的數(shù)據(jù)的相應單元格中顯示迷你圖。 因此，為了可視化一個月交易量的趨勢，只需將列的 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，以便在不同的上下文中可視化數(shù)據(jù)。

 

線條迷你圖、列迷你圖和 WinLoss 迷你圖

例如，線條迷你圖適用于可視化連續(xù)數(shù)據(jù)，例如銷售數(shù)據(jù)。 列迷你圖用于涉及數(shù)據(jù)比較的場景，例如，比較特定年份的月利潤。同樣，WinLoss 迷你圖最好用于可視化真假判斷（即取得勝利）場景，例如，跟蹤體育賽季。

 

在這里，由于我們有連續(xù)數(shù)據(jù)（一個月的交易量），因此我們將使用線型迷你線。 為了設置 sparkline 類型，您需要使用 Column 類的 Sparkline 屬性檢索 Sparkline 對象。

 

然后，將檢索到的對象的 SparklineType 屬性設置為 SparklineType.Line。 您還可以使用標記突出顯示迷你圖上的各個數(shù)據(jù)點，以使其更具可讀性。 例如，要突出顯示迷你圖中的最高和最低交易量值，請將 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 的外觀，例如軸的顏色、數(shù)據(jù)點的顏色、迷你圖主題顏色等。 此外，還可以更改迷你圖軸距、不同系列圖距、 winloss 迷你圖中兩條線之間的距離，以及迷你圖中線條的粗細。