纯前端表格控件SpreadJS新手入门指南：如何使用图表功能（一）

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 | 下载试用

标签：