SpreadJS新人学习笔记15-图表

收藏

本帖最后由 Fiooona 于 2019-4-9 18:22 编辑

SpreadJS提供图表功能，有28种图表类型，和SpreadJS的形状功能一样，使用该功能需要引用图表的JS文件。
图表组成：
1.图表区Area
2.表题Title
3.系列 Series（可用于组合图）
4.图例Legend
5.数据标签DataLabels
6.坐标轴Axes图表组成中的每个区域都可以获取设置一些属性，例如背景颜色、字体、标题等等。
柱状图/条形图：
应用场景：适用于二维数据集，每个数据点有两个值，例如下图统计的2017、2018年Github上使用语言的占比统计，每个统计值在X轴上对应编程语言，在Y轴上对应于所占百分比，可以利用柱子的高度，反应数据的差异。
SpreadJS提供三种柱状图，簇状柱形图、堆积柱形图、百分比堆积柱形图
如图所示是一个簇状柱状图：
image.png145563048.png

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

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

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

条形图与柱状图类似：
image.png762167968.png

折线图：
适用场景：适用于查看相等时间间隔里数据的变化趋势。
SpreadJS提供6种折线图，普通折线图、堆积折线图、百分比堆积折线图、数据点折线图、数据点堆积折线图、数据点百分比堆积折线图。转变数据的行列，可以看出每种语言在Github上使用情况的趋势对比。
image.png541285094.png

饼图：
适用场景：显示各项的大小与各项总和的比例。
SpreadJS支持饼图、圆环图，饼图只能显示一年的占比情况：
image.png113175353.png

使用圆环图可看每年的数据：
image.png905767516.png

面积图：
适用场景：用来绘制随着时间变化的变化图，主要突出数值之和的总体趋势。
以下面积图展示了几大州人口的变化趋势：
image.png434967650.png

散点图：
适用场景：显示若干数据系列中各数值之间的关系，类似XY轴，判断两变量之间是否存在某种关联。散点图适用于三维数据集，但其中只有两维需要比较。 image.png903169250.png

雷达图：适用场景：用于显示三个或更多维度变量的一种图表,它可以清晰直观的显示数据集中每个变量的权重，更注重相似图之间的比较。
SpreadJS中提供三种雷达图：雷达图，雷达填充图，以及带标记的雷达图
image.png476086730.png

旭日图：
适用场景：当数据具有多个层级关系的时候，旭日图可以通过环及其内外环关系清晰有效的展示多层级数据关系及构成。能表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况。旭日图中，离远点越近表示级别越高，相邻两层中，是内层包含外层的关系。没有层次关系的时候和饼图类似。
image.png804344482.png

树状图：
适用场景：数据有嵌套关系时，树形图可表现出层次关系，并根据值的大小分配对应面积的矩形。没有层次关系时各个矩形颜色不一，没有嵌套。

image.png914589538.png

组合图：
组合图是可以组合两个或两个以上类型的图，使之更容易理解，通过增加系列来创建组合图表。一个简单的组合图如下所示：
image.png574941710.png

股票图：
SpreadJS提供几种类型的股票图：stockHLC、stockVHLC、stockOHLC、stockVOHLC
以上几个大写字母分别代表：
H: 高点数据
L：低点数据
C: 收盘数据
O：开盘数据
V：成交量
以下示例中创建了tockVOHLC类型的股票图，添加数据源的顺序是：成交量数据、开盘数据、高点数据、低点数据、和收盘数据。

image.png310613402.png

获取股票数据的推荐地址：

http://quotes.money.163.com/service/chddata.html?code=[股票代码]&start=[开始日期]&end=[结束日期]&fields=[自定义列]
返回结果：历史股价及相关情况；CSV文件。
注意，该方法为网易公开方法，推荐使用。
其中，自定义列可定义TCLOSE收盘价 ;HIGH最高价;LOW最低价; TOPEN开盘价; LCLOSE前收盘价; CHG涨跌额; PCHG涨跌幅; TURNOVER换手率; VOTURNOVER成交量; VATURNOVER成交金额; TCAP总市值; MCAP流通市值这些值。
例如，[url=http://quotes.money.163.com/service/chddata.html?code=0601857&start=20071105&end=20150618&fields=TCLOSE;HIGH;LOW;TOPEN;LCLOSE;CHGCHG;TURNOVER;VOTURNOVER;VATURNOVER;TCAP;MCAP]http://quotes.money.163.com/serv ... ATURNOVER;TCAP;MCAP[/url]，获取0601857从2007-11-05到2015-06-18区间的数据。

碁大师 · 碁大师

我想要在图表上面添加右键显示自定义的菜单，请问这个要怎么做

Fiooona · Fiooona

碁大师发表于 2019-11-8 14:16
我想要在图表上面添加右键显示自定义的菜单，请问这个要怎么做

已经在这个帖子中回复您啦，感谢关注
https://gcdn.grapecity.com.cn/fo ... &extra=page%3D1

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

SpreadJS新人学习笔记15-图表

2 个回复

微信认证勋章