半岛权威十大直营(官方)网站

文档在线协同工具ONLYOFFICE教程:使用 ONLYOFFICE 宏创建电子表格数据热图

翻译|使用教程|编辑:吉炜炜|2025-04-21 13:35:19.533|阅读 11 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

ONLYOFFICE Docs,作为一款功能强大的在线编辑器,适用于您使用的平台的文本文档、电子表格、演示文稿、表单和 PDF 阅读器。

在数据分析中,一眼就能识别数值的变化对于决策至关重要。手动设置每个单元格的格式既耗时又容易出错。ONLYOFFICE 宏通过动态调整单元格颜色解决了这个问题,让您能够更轻松地高效解读复杂数据。

ONLYOFFICE Docs 最新下载


使用 ONLYOFFICE 宏创建电子表格数据热图

构建宏


var sheet = Api.GetActiveSheet(); var range = sheet.GetSelection(); var data = range.GetValue();

首先,我们分别初始化sheetrangedata 变量中的活动工作表、选择和范围。

“未选择数据”错误处理

紧接着,我们检查是否真的选中了任何数据。如果没有选中任何数据,我们将终止宏函数并显示一条相应的消息:“未选中任何数据”。


//We check if no data is selected, and show message if that is the case   if (!data) {
    console.log("No data selected");
    return;
  }

从选择中提取行和列索引

如果存在数据,我们将继续检索其参数——列起始、列结束、行起始和行结束索引。


//Indexes indicating where rows and columns start and end   var firstRowIndex = range.GetCells().Row;
  var firstColIndex = range.GetCells().Col;
  var lastRowIndex = data.length + firstRowIndex;
  var lastColIndex = data[0].length + firstColIndex;

我们可以通过多种方式获取索引,但其中一种方法如上面的代码片段所示:

  • range.GetCells() – 我们访问我们选择的单元格,并通过附加.Row().Col(),我们获得第一行和第一列的索引。
  • 一旦我们有了它,我们就可以使用data.length来获取数据中的行数。然后,我们将它添加到firstRowIndex变量中以获取最后一行的索引。我们对列执行相同的操作,使用data[0].length获取列数,然后将其添加到firstColIndex变量中。

为什么是 data[0]?

由于我们不知道有多少行,并且data[0]data[1]等每个都代表一行,因此我们唯一可以确定的是,我们的数据始终至少有一行。这意味着,只要变量dat a包含任何值, data[0]就始终有效

从选定的电子表格单元格中收集数字

接下来,我们创建数组并用我们选择的数字填充它。


var values = []; //We will store number from selected data here   for (var i = firstColIndex; i < lastColIndex; i++) {
    for (var j = firstRowIndex; j < lastRowIndex; j++) {
      //We are checking if the value is a number       //If it is, we store it to values array       if (!isNaN(parseFloat(sheet.GetCells(j, i).GetValue()))) {
        var value = parseFloat(sheet.GetCells(j, i).GetValue());
        values.push(sheet.GetCells(j, i).GetValue());
      }
    }
  }

 初始化数组后,我们遍历选择中的每个单元格。

默认情况下,每个单元格中的值都被视为字符串,因此当我们检查值是否为数字时,我们首先需要使用parseFloat()方法将其转换为数字。

如果单元格内的字符串代表数字,parseFloat会将其转换为数字。如果不是,则会将其转换为NaN(非数字)。

isNaN(…)函数检查括号内的值是否为数字。如果我们在isNaN(…)前面添加一个“!” ,则表示检查该值是否为数字。

如果值是数字,我们初始化value变量并将数字存储在其中。然后将该值附加到values数组中。

迭代之后,我们得到 数组,其中包含所选单元格的所有数字。

我们需要这个数组的原因是我们可以使用Math.min()Math.max() JavaScript 方法从选定的单元格中找到最小数字和最大数字。

查找最小值和最大值


//Storing minimum and maximum values from the values array   var minValue = Math.min(...values);
  var maxValue = Math.max(...values);

应用颜色

现在我们已经掌握了所有必要的信息,我们可以将自定义颜色应用到包含数字的单元格。

我们拥有所选单元格的最小数字和最大数字,因此我们可以再次遍历这些单元格。

 
for (var i = firstColIndex; i < lastColIndex; i++) {
    for (var j = firstRowIndex; j < lastRowIndex; j++) {
      //Again we have to check if the value is a number       //If it is, we create the color depending on that value       //As well as minimum and maximum value from the array       if (!isNaN(parseFloat(sheet.GetCells(j, i).GetValue()))) {
        var value = parseFloat(sheet.GetCells(j, i).GetValue());
        var ratio = (value - minValue) / (maxValue - minValue);
        var red = Math.round(255 * ratio);
        var green = Math.round(255 * (1 - ratio));
        sheet
          .GetCells(j, i)
          .SetFillColor(Api.CreateColorFromRGB(red, green, 0));
        //We want colors to go from green to red       }
    }
  }

使用 RGB 系统创建颜色时,我们需要红色、绿色和蓝色参数来生成任何所需的颜色。在这种情况下,颜色范围应从绿色到红色,这意味着蓝色参数保持为 0,而红色和绿色参数则根据所需的色调而变化。

如果数字较小(越接近最小值),颜色就会偏绿(最小值对应纯绿色)。相反,如果数字较大,颜色就会偏红(最大值对应纯红色)。

为了确定数字的大小,我们使用最小-最大标准化方法来获得 0 和 1 之间的“比率”。数字越大,比率越接近 1,而数字越小,比率越接近 0。此比率是使用minValuemaxValue变量计算的。

然后,我们可以用这个比例来确定红色和绿色的参数。与0到1的比率不同,红色和绿色的值都是从0到255,所以我们需要相应地乘以比率。

由于红色对于较大的数字来说应该更占主导地位,我们通过将比率乘以 225 并将其四舍五入到最接近的整数来计算。

对于绿色,计算方法有所不同。对于较小的数字,绿色应该更占主导地位,因此我们使用比率,将其乘以 225。当数字较大时,比率趋近于 1,使得比率 更小,从而降低了绿色值。

一旦我们获得红色和绿色参数,我们就使用Api.CreateColorFromRGB(r, g, b)来创建颜色并使用.SetFillColor(color)将其应用到单元格。

完整的宏代码

(function () {
  var sheet = Api.GetActiveSheet();
  var range = sheet.GetSelection();
  var data = range.GetValue();


  //We check if no data is selected, and show message if that is the case   if (!data) {
    console.log("No data selected");
    return;
  }


  //Indexes indicating where rows and columns start and end   var firstRowIndex = range.GetCells().Row;
  var firstColIndex = range.GetCells().Col;
  var lastRowIndex = data.length + firstRowIndex;
  var lastColIndex = data[0].length + firstColIndex;


  console.log(firstColIndex + " " + lastColIndex); //Testing if we got the right column indexes, first should be on spot, last should be higher by 1   console.log(firstRowIndex + " " + lastRowIndex); //Testing if we got the right row indexes, first should be on spot, last should be higher by 1   var values = []; //We will store number from selected data here   for (var i = firstColIndex; i < lastColIndex; i++) {
    for (var j = firstRowIndex; j < lastRowIndex; j++) {
      //We are checking if the value is a number       //If it is, we store it to values array       if (!isNaN(parseFloat(sheet.GetCells(j, i).GetValue()))) {
        var value = parseFloat(sheet.GetCells(j, i).GetValue());
        values.push(sheet.GetCells(j, i).GetValue());
      }
    }
  }


  //Storing minimum and maximum values from the values array   var minValue = Math.min(...values);
  var maxValue = Math.max(...values);


  for (var i = firstColIndex; i < lastColIndex; i++) {
    for (var j = firstRowIndex; j < lastRowIndex; j++) {
      //Again we have to check if the value is a number       //If it is, we create the color depending on that value       //As well as minimum and maximum value from the array       if (!isNaN(parseFloat(sheet.GetCells(j, i).GetValue()))) {
        var value = parseFloat(sheet.GetCells(j, i).GetValue());
        var ratio = (value - minValue) / (maxValue - minValue);
        var red = Math.round(255 * ratio);
        var green = Math.round(255 * (1 - ratio));
        sheet
          .GetCells(j, i)
          .SetFillColor(Api.CreateColorFromRGB(red, green, 0));
        //We want colors to go from green to red       }
    }
  }
})();

让我们运行宏并看看它是如何工作的!

在我们运行宏之前:

使用 ONLYOFFICE 宏创建电子表格数据热图

运行宏后:

使用 ONLYOFFICE 宏创建电子表格数据热图

 现在,您可以轻松在电子表格中可视化数据分布,使分析更加直观。无论您使用的是 ONLYOFFICE 桌面版还是网页版,此宏都能无缝集成到您的工作流程中。

————————————————————————————————————————

关于慧都科技:

慧都科技是一家行业数字化解决方案公司,长期专注于软件、油气与制造行业。公司基于深入的业务理解与管理洞察,以系统化的业务建模驱动技术落地,帮助企业实现智能化运营与长期竞争优势。在软件工程领域,我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品,提供正版授权采购、技术选型、个性化维保等服务,帮助客户实现技术合规、降本增效与风险可控。慧都科技ONLYOFFICE在中国的官方授权代理商,提供ONLYOFFICE系列产品免费试用,咨询,正版销售等于一体的专业化服务。ONLYOFFICE是文档在线编辑领域的优秀产品,帮助企业实现高效的文档协同处理。

下载|体验更多ONLYOFFICE产品咨询,或拨打产品热线:023-68661681



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@wqylolg.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP