找回密码
 立即注册

QQ登录

只需一步,快速开始

Winny

超级版主

130

主题

246

帖子

1528

积分

超级版主

Rank: 8Rank: 8

积分
1528
Winny
超级版主   /  发表于:2021-5-18 16:36  /   查看:1923  /  回复:0
本帖最后由 Winny 于 2021-5-18 16:51 编辑

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

1. 在设计器中插入迷你直方图
    step1: 点击插入 -->  迷你图;
    图片.png677301330.png
    step2: 选择数据源位置与迷你图放置位置;
    图片.png535333251.png
    step3: 点击设置,对迷你图进行各部分进行设置。
    图片.png132994689.png

2. 代码实现插入迷你图
    首先对直方图各模块进行简单的介绍:
    图片.png297531432.png
    具体设置API如下:
  1. /**
  2. *@dataRange: 必须,数据源区域;
  3. *@continuous: 可选,为true时表示连续直方图,false表示离散型直方图,默认为true;
  4. *@paintLabel: 可选,底部数据轴,为true时显示数据轴,false时不显示,默认为false;
  5. *@scale: 可选,当为连续型直方图时,用于设置bin width,数值类型,默认值为1,需要大于0;
  6. *@barWidth: 可选;用于设置barWidth,barWidth = auto calc width * barWdth,数值类型,默认值为1,取值范围0<value<=1
  7. *@barColor: 可选,用于设置直方图数据项颜色,默认为“5B9BD5”,支持css的颜色设置方式;
  8. *@labelFontStyle: 可选,用于设置底部数据轴字体风格,默认9pt Caribl,支持css字体属性的设置,但仅支持font-style,font-weight,font-size,font-family;
  9. *@labelColor: 可选,底部数据轴数据颜色,默认为'silver',支持css颜色设置方式;
  10. *@edgeColor: 可选,设置数据项边框颜色
  11. **/
  12. HISTOGRAMSPARKLINE(dataRange,continuous?,paintLabel?,scale?,barWidth?,barColor?,labelFontStyle?,labelColor,edgeColor?)
复制代码
   在单元格添加迷你直方图:  
  1. sheet.setFormula(1, 1, "HISTOGRAMSPARKLINE(A1:A10,TRUE,TRUE,3)" );
  2. // show a continuous histogram sparkline .
  3. sheet.setFormula(1, 2, "HISTOGRAMSPARKLINE(A1:A10,TRUE,,3)");
  4. // show a continuous histogram sparkline without data label.
  5. sheet.setFormula(1, 3, "HISTOGRAMSPARKLINE(A1:A10,FALSE)");
  6. // show a discrete histogram sparkline without data label
复制代码
    直方图底部数据轴内容为什么不显示?
    当单个数据轴宽度大于平均数据项宽度时,底部的数据轴不会显示,因此在使用的时候尽量将单元格的宽度调大一些,避免发生数据轴无法显示的问题。

   


0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部