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

引言

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

迷你图的概述与作用

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

SpreadJS 对迷你图的支持

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

在 SpreadJS 中创建迷你图的方式

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

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

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

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

结论

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/86110.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/86110.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

GESP2024年12月认证C++一级( 第三部分编程题(1)温度转换)

参考程序1&#xff1a; #include <cstdio> using namespace std;int main() {double K;scanf("%lf", &K);double C K - 273.15; //转换为摄氏温度 double F 32 C * 1.8; //转换为华氏温度 if (F > 212) //条件判断 print…

从零开始手写redis(18)缓存淘汰算法 FIFO 优化

项目简介 大家好&#xff0c;我是老马。 Cache 用于实现一个可拓展的高性能本地缓存。 有人的地方&#xff0c;就有江湖。有高性能的地方&#xff0c;就有 cache。 v1.0.0 版本 以前的 FIFO 实现比较简单&#xff0c;但是 queue 循环一遍删除的话&#xff0c;性能实在是太…

用Zynq实现脉冲多普勒雷达信号处理:架构、算法与实现详解

用Zynq实现脉冲多普勒雷达信号处理:架构、算法与实现详解 脉冲多普勒(PD)雷达是现代雷达系统的核心技术之一,广泛应用于机载火控、气象监测、交通监控等领域。其核心优势在于能在强杂波背景下检测运动目标,并精确测量其径向速度。本文将深入探讨如何利用Xilinx Zynq SoC(…

OpenCV CUDA模块设备层-----线程块级别的一个内存填充工具函数blockFill()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在同一个线程块&#xff08;thread block&#xff09;内&#xff0c;将 [beg, end) 范围内的数据并行地填充为指定值 value。 它使用了 CUDA 线程…

SAP-ABAP:如何查询 SAP 事务码(T-Code)被包含在哪些权限角色或权限对象中

要查询 SAP 事务码&#xff08;T-Code&#xff09;被包含在哪些权限角色或权限对象中&#xff0c;可使用以下专业方法&#xff1a; &#x1f50d; 1. 通过权限浏览器 (SUIM) - 最推荐 事务码&#xff1a;SUIM (权限信息系统) 操作步骤&#xff1a; 执行 SUIM → 选择 “角色…

MySQL 多列 IN 查询详解:语法、性能与实战技巧

在 MySQL 中&#xff0c;多列 IN 查询是一种强大的筛选工具&#xff0c;它允许通过多字段组合快速过滤数据。相较于传统的 OR 连接多个条件&#xff0c;这种语法更简洁高效&#xff0c;尤其适合批量匹配复合键或联合字段的场景。本文将深入解析其用法&#xff0c;并探讨性能优化…

自由学习记录(63)

编码全称&#xff1a;AV1&#xff08;Alliance for Open Media Video 1&#xff09;。 算力消耗大&#xff1a;目前&#xff08;截至 2025 年中&#xff09;软件解码 AV1 的 CPU 开销非常高&#xff0c;如果没有专门的硬件解码单元&#xff0c;播放高清视频时会很吃 CPU&#…

日本生活:日语语言学校-日语作文-沟通无国界(4)-题目:喜欢读书

日本生活&#xff1a;日语语言学校-日语作文-沟通无国界&#xff08;4&#xff09;-题目&#xff1a;喜欢读书 1-前言2-作文原稿3-作文日语和译本&#xff08;1&#xff09;日文原文&#xff08;2&#xff09;对应中文&#xff08;3&#xff09;对应英文 4-老师评语5-自我感想&…

C++优化程序的Tips

转自个人博客 1. 避免创建过多中间变量 过多的中间变量不利于代码的可读性&#xff0c;还会增加内存的使用&#xff0c;而且可能导致额外的计算开销。 将用于同一种情况的变量统一管理&#xff0c;可以使用一种通用的变量来代替多个变量。 2. 函数中习惯使用引用传参而不是返…

C#Blazor应用-跨平台WEB开发VB.NET

在 C# 中实现 Blazor 应用需要结合 Razor 语法和 C# 代码&#xff0c;Blazor 允许使用 C# 同时开发前端和后端逻辑。以下是一个完整的 C# Blazor 实现示例&#xff0c;包含项目创建、基础组件和数据交互等内容&#xff1a; 一、创建 Blazor 项目 使用 Visual Studio 新建项目 …

前端的安全隐患之API恶意调用

永远不要相信前端传来的数据&#xff0c;对于资深开发者而言&#xff0c;这几乎是一种本能&#xff0c;无需过多解释。然而&#xff0c;初入职场的开发新手可能会感到困惑&#xff1a;为何要对前端传来的数据持有如此不信任的态度&#xff1f;难道人与人之间连基本的信任都不存…

基于 Spark 实现 COS 海量数据处理

上周在组内分享了一下这个主题&#xff0c; 我觉得还是摘出一部分当文章输出出来 分享主要包括三个方面&#xff1a; 1. 项目背景 2.Spark 原理 3. Spark 实战 项目背景 主要是将海量日志进行多维度处理&#xff1b; 项目难点 1、数据量大&#xff08;压缩包数量 6TB,60 亿条数…

Unity3D 屏幕点击特效

实现点击屏幕任意位置播放点击特效。 屏幕点击特效 需求 现有一个需求&#xff0c;点击屏幕任意位置&#xff0c;播放一个点击特效。 美术已经做好了特效&#xff0c;效果如图&#xff1a; 特效容器 首先&#xff0c;画布是 Camera 模式&#xff0c;画布底下有一个 UIClic…

MCU编程

MCU 编程基础&#xff1a;概念、架构与实践 一、什么是 MCU 编程&#xff1f; MCU&#xff08;Microcontroller Unit&#xff0c;微控制器&#xff09; 是将 CPU、内存、外设&#xff08;如 GPIO、UART、ADC&#xff09;集成在单一芯片上的小型计算机系统。MCU 编程即针对这些…

Go语言--语法基础6--基本数据类型--数组类型(1)

Go 语言提供了数组类型的数据结构。 数组是具有相同唯一类型的一组已编号且长度固定的数据项序列&#xff0c;这种类型可以是任意的 原始类型例如整型、字符串或者自定义类型。相对于去声明number0,number1, ..., and number99 的变量&#xff0c;使用数组形式 numbers[0], …

左神算法之给定一个数组arr,返回其中的数值的差值等于k的子数组有多少个

目录 1. 题目2. 解释3. 思路4. 代码5. 总结 1. 题目 给定一个数组arr&#xff0c;返回其中的数值的差值等于k的子数组有多少个 2. 解释 略 3. 思路 直接用hashSet进行存储&#xff0c;查这个值加上k后的值是否在数组中 4. 代码 public class Problem01_SubvalueEqualk {…

自回归(AR)与掩码(MLM)的核心区别:续写还是补全?

自回归(AR)与掩码(MLM)的核心区别:用例子秒懂 一、核心机制对比:像“续写”还是“完形填空”? 维度自回归(Autoregressive)掩码语言模型(Masked LM)核心目标根据已生成的token,预测下一个token(顺序生成)预测句子中被“掩码”的token(补全缺失信息)输入输出输入…

后端开发两个月实习总结

前言 本人目前在一家小公司后端开发实习差不多两个月了&#xff0c;现在准备离职了&#xff0c;就这两个月的实习经历写下这篇文章&#xff0c;既是对自己实习的一个总结&#xff0c;也是给正在找实习的小伙伴以及未来即将进入到后端开发这个行业的同学的分享一下经验。 一、个…

Python基础(​​FAISS​和​​Chroma​)

​​1. 索引与查询性能​ ​​指标​​​​FAISS​​​​Chroma​​​​分析​​​​索引构建速度​​72.4秒&#xff08;5551个文本块&#xff09;91.59秒&#xff08;相同数据集&#xff09;FAISS的底层优化&#xff08;如PQ量化&#xff09;加速索引构建&#xff0c;适合批…

Windows下memcpy_s如何在Linux下使用

Windows下代码如下 memcpy_s(pLine->ppBuf[i], m_ColorLineByte, pIn nOffset, m_ColorLineByte); 方案 1&#xff1a;使用标准 memcpy 手动检查&#xff08;最通用&#xff09; // 检查参数有效性 if (pLine->ppBuf[i] nullptr || pIn nullptr || m_ColorLi…