纯前端表格控件SpreadJS图表功能入门指南（第一部分）

点击获取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提供三种柱状图，簇状柱形图、堆积柱形图、百分比堆积柱形图。

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

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

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

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

条形图与柱状图类似：

折线图：

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

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

饼图：

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

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

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

面积图：

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

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

SpreadJS | 下载试用

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

本文转载自葡萄城