引言
在數據處理和分析領域，直觀地展示數據趨勢對于理解數據和做出決策至關重要。迷你圖作為一種簡潔而有效的數據可視化方式，在顯示數據趨勢方面發揮著重要作用，尤其在與他人共享數據時，能夠快速傳達關鍵信息。SpreadJS 作為一款強大的電子表格組件，對迷你圖功能提供了豐富的支持。本文將詳細介紹 SpreadJS 迷你圖的特點、優勢、創建方式以及與 GcExcel 的兼容情況。
迷你圖的概述與作用
迷你圖是單個工作表單元格內的微型圖表，它在顯示數據趨勢時非常有用。通過迷你圖，可以直觀地表示和顯示數據趨勢，用不同顏色吸引對某些內容（如季節性增加或降低或經濟周期）的注意，并突出顯示最大和最小值。當我們需要與他人共享數據時，迷你圖能夠以簡潔的方式傳達數據的關鍵趨勢，幫助他人快速理解數據背后的含義。
SpreadJS 對迷你圖的支持
SpreadJS 充分認識到迷你圖在數據可視化中的重要性，為用戶提供了豐富的迷你圖功能。它支持多種類型的迷你圖，能夠滿足不同場景下的數據趨勢展示需求。用戶可以方便地在 SpreadJS 中創建迷你圖，將復雜的數據以直觀的方式呈現出來。
在 SpreadJS 中創建迷你圖的方式
- 使用 setSparkline 方法：您可以使用 setSparkline 方法將迷你圖類型設置為柱形、折線或盈虧類型，也可以使用特定類型的公式來創建 SpreadJS 中可用的不同迷你圖。不過需要注意，使用公式創建的迷你圖無法導出到 Excel 文件中。
setSparkline 方法的調用示例如下，之后調用 setSparkline () 方法并指定：
- 迷你圖的位置
- 數據的位置
- 迷你圖的方向
- 迷你圖的類型
- 之前創建的設置
代碼示例如下：
let sheet = spread.getActiveSheet();
sheet.setArray(0, 0, [1,2,3,4,3,2,3,5]);let dataRange = new GC.Spread.Sheets.Range(0, 0, 8, 1);let setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();let sparkline1 = sheet.setSparkline(11, 0, dataRange, GC.Spread.Sheets.Sparklines.DataOrientation.Vertical, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);let sparkline2 = sheet.setSparkline(11, 3, dataRange, GC.Spread.Sheets.Sparklines.DataOrientation.Vertical, GC.Spread.Sheets.Sparklines.SparklineType.line, setting);```此外，還可以使用如下代碼設置迷你圖分組和取消分組：
```javascript
group.sparklineType = GC.Spread.Sheets.Sparklines.SparklineType.column;// 取消迷你圖的分組
sheet.ungroupSparkline(group);```[1][1] [SpreadJS產品文檔_葡萄城 SpreadJS 離線文檔（Docs&API） - v18-20250416 - Page 1001 - 1500.pdf](https://lf9-appstore-sign.oceancloudapi.com/ocean-cloud-tos/FileBizType.BIZ_BOT_DATASET/406151306683948_1750323178937327824_NYuywwy2tN.pdf?lk3s=61a3dea3&x-expires=1753244510&x-signature=gP60MWYYY2J05ERK463oVANayxw%3D)[2] SpreadJS技術文章_如何使用 JavaScript 導入和導出 Excel.docx[3] GcExcel技術文章_如何使用 JavaScript 導入和導出 Excel.docx[4] [SpreadJS產品文檔_葡萄城 SpreadJS 離線文檔（Docs&API） - v18-20250416 - Page 6501 - 7000
- 自定義迷你圖公式：在 SpreadJS 中，可以實現自己的邏輯，利用提供的數據集和設置來定義自定義迷你圖公式，并使用 addSparklineEx 方法添加該自定義迷你圖。使用以下步驟創建自定義迷你圖：
以下示例代碼展示了創建自定義迷你圖的過程：
function Clock() { GC.Spread.Sheets.Sparklines.SparklineEx.call(this);
}
Clock.prototype = new GC.Spread.Sheets.Sparklines.SparklineEx();
Clock.prototype.createFunction = function () { var func = new GC.Spread.CalcEngine.Functions.Function('CLOCK', 1, 1); func.evaluate = function (args) { return args[0]; }; return func;
};
Clock.prototype._drawCircle = function (context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true); context.stroke();
};
Clock.prototype._drawCenter = function (context, centerX, centerY, radius) { context.beginPath(); context.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
}
- 將迷你圖呈現為圖像：你可以通過將圖片填充的 src 或 style.fill.src 屬性綁定到迷你圖公式，將迷你圖呈現為圖像。同樣地，迷你圖公式可以綁定到自選圖形的 style.fill.src 屬性上。此外，SpreadJS 允許在將迷你圖綁定到 src 屬性時，為迷你圖添加漸變、純色和其他填充效果。以下示例代碼展示了如何添加一個矩形作為形狀，并將其綁定到一個柱形迷你圖 [2]。
下面的圖片展示了垂直柱形迷你圖的實際應用，它展示了不同城市一年中氣溫水平的變化趨勢，有助于快速了解數據的高低點。
迷你圖在實際應用中的優勢
在實際的數據處理和分析場景中，迷你圖具有諸多優勢。它可以在不占用大量空間的情況下，清晰地展示數據的趨勢變化。例如，在金融領域，通過迷你圖可以快速觀察股票價格的走勢；在銷售數據統計中，能夠直觀地看到不同時間段的銷售趨勢。這種簡潔而高效的可視化方式，有助于提高數據的分析效率和決策的準確性。
結論
SpreadJS 的迷你圖功能為數據趨勢的可視化提供了強大的支持。它不僅具備豐富多樣的創建方式，還支持多種類型的迷你圖，滿足了不同用戶和場景的需求。
SpreadJS，可嵌入您系統的在線 Excel
)
)
