SpreadJS V14 Update1 新特性 - 迷你图增强 - 直方图

收藏

本帖最后由 Winny 于 2021-5-18 16:51 编辑

直方图是数值数据分布的精确图形表示，在日常数据分析展示中有较高的使用频率，因此SpreadJS V14 Update1在迷你图中新增了直方图，直方图包含两种类型，分别为离散直方分布图及连续直方分布图。

1. 在设计器中插入迷你直方图
step1: 点击插入 --> 迷你图；
图片.png677301330.png

step2: 选择数据源位置与迷你图放置位置；
图片.png535333251.png

step3: 点击设置，对迷你图进行各部分进行设置。
图片.png132994689.png

2. 代码实现插入迷你图
首先对直方图各模块进行简单的介绍：
图片.png297531432.png

具体设置API如下：

/**
*@dataRange: 必须，数据源区域;
*@continuous: 可选，为true时表示连续直方图，false表示离散型直方图，默认为true;
*@paintLabel: 可选，底部数据轴，为true时显示数据轴，false时不显示，默认为false;
*@scale: 可选，当为连续型直方图时，用于设置bin width，数值类型，默认值为1，需要大于0；
*@barWidth: 可选；用于设置barWidth,barWidth = auto calc width * barWdth,数值类型，默认值为1，取值范围0<value<=1
*@barColor: 可选，用于设置直方图数据项颜色，默认为“5B9BD5”，支持css的颜色设置方式；
*@labelFontStyle: 可选，用于设置底部数据轴字体风格，默认9pt Caribl，支持css字体属性的设置，但仅支持font-style,font-weight,font-size,font-family;
*@labelColor: 可选，底部数据轴数据颜色，默认为'silver',支持css颜色设置方式；
*@edgeColor: 可选，设置数据项边框颜色
**/
HISTOGRAMSPARKLINE(dataRange,continuous?,paintLabel?,scale?,barWidth?,barColor?,labelFontStyle?,labelColor,edgeColor?)

复制代码

在单元格添加迷你直方图：

sheet.setFormula(1, 1, "HISTOGRAMSPARKLINE(A1:A10,TRUE,TRUE,3)" );
// show a continuous histogram sparkline .
sheet.setFormula(1, 2, "HISTOGRAMSPARKLINE(A1:A10,TRUE,,3)");
// show a continuous histogram sparkline without data label.
sheet.setFormula(1, 3, "HISTOGRAMSPARKLINE(A1:A10,FALSE)");
// show a discrete histogram sparkline without data label

复制代码

直方图底部数据轴内容为什么不显示？
当单个数据轴宽度大于平均数据项宽度时，底部的数据轴不会显示，因此在使用的时候尽量将单元格的宽度调大一些，避免发生数据轴无法显示的问题。

		自动登录	找回密码
密码			立即注册

SpreadJS V14 Update1 新特性 - 迷你图增强 - 直方图

0 个回复