彩票走势图

纯前端表格控件SpreadJS新手入门指南:如何使用图表功能(一)

转帖|使用教程|编辑:龚雪|2022-08-09 10:59:06.737|阅读 160 次

概述:本文主要为大家介绍SpreadJS控件的图表功能,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

点击获取SpreadJS v15.0官方正式版下载

SpreadJS提供图表功能,有28种图表 类型,和SpreadJS的形状功能一样,使用该功能需要引用图表的JS文件。

图表组成:

  1. 图表区Area
  2. 表题Title
  3. 系列 Series(可用于组合图)
  4. 图例Legend
  5. 数据标签DataLabels
  6. 坐标轴Axes图表组成中的每个区域都可以获取设置一些属性,例如背景颜色、字体、标题等等。
柱状图/条形图:

应用场景:适用于二维数据集,每个数据点有两个值,例如下图统计的2017、2018年Github上使用语言的占比统计,每个统计值在X轴上对应编程语言,在Y轴上对应于所占百分比,可以利用柱子的高度,反应数据的差异。

SpreadJS提供三种柱状图,簇状柱形图、堆积柱形图、百分比堆积柱形图。

如图所示是一个簇状柱状图:

纯前端表格控件SpreadJS图表

百分比堆积柱形图,方便于对比2017、2018两年的差异:

纯前端表格控件SpreadJS图表

堆积柱形图,方便于查看两年综合的使用情况:

纯前端表格控件SpreadJS图表

点击按钮可以进行相关的操作,删除、清空、新增表格。选中一片单元格的区域,点击新增图表,可根据所选中内容生成一个柱状图:

纯前端表格控件SpreadJS图表

条形图与柱状图类似:

纯前端表格控件SpreadJS图表
折线图:

适用场景:适用于查看相等时间间隔里数据的变化趋势。

SpreadJS提供6种折线图,普通折线图、堆积折线图、百分比堆积折线图、数据点折线图、数据点堆积折线图、数据点百分比堆积折线图。转变数据的行列,可以看出每种语言在Github上使用情况的趋势对比。

纯前端表格控件SpreadJS图表
饼图:

适用场景:显示各项的大小与各项总和的比例。

SpreadJS支持饼图、圆环图,饼图只能显示一年的占比情况:

纯前端表格控件SpreadJS图表

使用圆环图可看每年的数据:

纯前端表格控件SpreadJS图表
面积图:

适用场景:用来绘制随着时间变化的变化图,主要突出数值之和的总体趋势。

以下面积图展示了几大州人口的变化趋势:

纯前端表格控件SpreadJS图表

SpreadJS | 下载试用

纯前端表格控件SpreadJS,兼容 450 种以上的 Excel 公式,具备“高性能、跨平台、与 Excel 高度兼容”的产品特性,备受华为、苏宁易购、天弘基金等行业龙头企业的青睐,并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能,满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求,极大的降低企业研发成本和项目交付风险。

本文转载自


标签:

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

文章转载自:

为你推荐

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


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP