SpreadJS 迷你图:数据趋势可视化的利器

引言

在数据处理和分析领域,直观地展示数据趋势对于理解数据和做出决策至关重要。迷你图作为一种简洁而有效的数据可视化方式,在显示数据趋势方面发挥着重要作用,尤其在与他人共享数据时,能够快速传达关键信息。SpreadJS 作为一款强大的电子表格组件,对迷你图功能提供了丰富的支持。本文将详细介绍 SpreadJS 迷你图的特点、优势、创建方式以及与 GcExcel 的兼容情况。

迷你图的概述与作用

迷你图是单个工作表单元格内的微型图表,它在显示数据趋势时非常有用。通过迷你图,可以直观地表示和显示数据趋势,用不同颜色吸引对某些内容(如季节性增加或降低或经济周期)的注意,并突出显示最大和最小值。当我们需要与他人共享数据时,迷你图能够以简洁的方式传达数据的关键趋势,帮助他人快速理解数据背后的含义。

SpreadJS 对迷你图的支持

SpreadJS 充分认识到迷你图在数据可视化中的重要性,为用户提供了丰富的迷你图功能。它支持多种类型的迷你图,能够满足不同场景下的数据趋势展示需求。用户可以方便地在 SpreadJS 中创建迷你图,将复杂的数据以直观的方式呈现出来。

在 SpreadJS 中创建迷你图的方式

  1. 使用 setSparkline 方法:您可以使用 setSparkline 方法将迷你图类型设置为柱形、折线或盈亏类型,也可以使用特定类型的公式来创建 SpreadJS 中可用的不同迷你图。不过需要注意,使用公式创建的迷你图无法导出到 Excel 文件中。

setSparkline 方法的调用示例如下,之后调用 setSparkline () 方法并指定:

  • 迷你图的位置
  • 数据的位置
  • 迷你图的方向
  • 迷你图的类型
  • 之前创建的设置

代码示例如下:

JavaScript 复制代码
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
  1. 自定义迷你图公式:在 SpreadJS 中,可以实现自己的逻辑,利用提供的数据集和设置来定义自定义迷你图公式,并使用 addSparklineEx 方法添加该自定义迷你图。使用以下步骤创建自定义迷你图:

以下示例代码展示了创建自定义迷你图的过程:

JavaScript 复制代码
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); 
}
  1. 将迷你图呈现为图像:你可以通过将图片填充的 src 或 style.fill.src 属性绑定到迷你图公式,将迷你图呈现为图像。同样地,迷你图公式可以绑定到自选图形的 style.fill.src 属性上。此外,SpreadJS 允许在将迷你图绑定到 src 属性时,为迷你图添加渐变、纯色和其他填充效果。以下示例代码展示了如何添加一个矩形作为形状,并将其绑定到一个柱形迷你图 [2]。

下面的图片展示了垂直柱形迷你图的实际应用,它展示了不同城市一年中气温水平的变化趋势,有助于快速了解数据的高低点。

迷你图在实际应用中的优势

在实际的数据处理和分析场景中,迷你图具有诸多优势。它可以在不占用大量空间的情况下,清晰地展示数据的趋势变化。例如,在金融领域,通过迷你图可以快速观察股票价格的走势;在销售数据统计中,能够直观地看到不同时间段的销售趋势。这种简洁而高效的可视化方式,有助于提高数据的分析效率和决策的准确性。

结论

SpreadJS 的迷你图功能为数据趋势的可视化提供了强大的支持。它不仅具备丰富多样的创建方式,还支持多种类型的迷你图,满足了不同用户和场景的需求。

SpreadJS,可嵌入您系统的在线 Excel

相关推荐
XiaoMu_00113 小时前
基于Python+Streamlit的旅游数据分析与预测系统:从数据可视化到机器学习预测的完整实现
python·信息可视化·旅游
IT研究室20 小时前
大数据毕业设计选题推荐-基于大数据的国家药品采集药品数据可视化分析系统-Spark-Hadoop-Bigdata
大数据·hadoop·信息可视化·spark·毕业设计·数据可视化·bigdata
毕设源码-郭学长21 小时前
【开题答辩全过程】以电商数据可视化系统为例,包含答辩的问题和答案
信息可视化
没有梦想的咸鱼185-1037-16631 天前
【高分论文密码】大尺度空间模拟预测与数字制图
信息可视化·数据分析·r语言
二川bro1 天前
第27节:3D数据可视化与大规模地形渲染
3d·信息可视化
星图云2 天前
从课前到课后,地理创新实验室赋能教学新范式
信息可视化
云天徽上2 天前
【数据可视化-107】2025年1-7月全国出口总额Top 10省市数据分析:用Python和Pyecharts打造炫酷可视化大屏
开发语言·python·信息可视化·数据挖掘·数据分析·pyecharts
界面开发小八哥3 天前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
Yvonne爱编码3 天前
零基础学习数据采集与监视控制系统SCADA
学习·信息可视化·信息与通信·数据可视化
计算机毕业设计指导3 天前
基于Spring Boot的幼儿园管理系统
spring boot·后端·信息可视化